Help making an image expand and contract with the change in screen resolution

I have a image of a shelf that I want to expand and contract with the change in width on the screen resolution. The ends of the shelf have graphically designed images that must remain on the ends. However, as the screen size changes, I want the center to fit the entire width of the shelf. I have tried and can't seem to find a way to do this with all the different screen sizes. You can find an example here: http://jsfiddle.net/SndhQ/. In this example, I changed the images to just colors to make it easy.

Here is the HTML:

<div class="shelf">
  <div class="shelfleft"></div>
  <div class="shelfline"></div>
  <div class="shelfright"></div>
</div>

and Here is the CSS:

.shelf{
float: left;
left: 5%;
margin-left: 5%;
margin-right: 5%;
position: absolute;
top: 160px;
width: 79%;
}

.shelfleft{
background: red;
float: left;
height: 35px;
width: 19px;
}

.shelfline{
background: yellow;
float: left;
height: 35px;
margin-right: -10px;
width: 96%;
}

.shelfright{
bac开发者_运维问答kground: blue;
float: right;
height: 35px;
width: 19px;
}

Any advice would be greatly appreciated. I only been coding for a few months. Thanks.

Here you are sir: http://jsfiddle.net/tybro0103/SndhQ/2/

You were on the right track, just a few changes:
1. Insert the "shelfright" div before the "shelfline" div.
2. drop the float and the width on shelfline (divs by default take up as much width as they can)
3. make shelfline's left and right margin's the same as the width of shelfleft and shelfright