using css to create expanding side columns with background images

On my page I want one center fixed width container, on either side of this container I want to have a background image that expands to fill the rest of the page. Like this:

<<expanding>>  <<fixed width 980px>> <<expanding>>

I'm having a very difficult time getting this to work. My layout looks basically like this:

<div class="side_bar">
  <div class="top_stripe">&nbsp;</div>
</div>
<div class="container">
<div class="side_bar">
  <div class="top_stripe">&nbsp;</div>
</div>

.side_bar {
      float: left;
}
.top_stripe {
      background-image: url(../images/top_bg_stripe.png);
      background-repeat: repeat-x;
      background-position: top;
      width: auto;
      height: 230px;
}
.container {
      width: 980px; /* the auto value on the sides, coupled with the width, centers the layout */
      margin-top: 0;
      margin-right: 0px;
      margin-bottom: 0;
      margin-left: 0px;
      float: left;
}

The sample page is here:

http://www.glowfishtw.com/play3on3/index.aspx#

I thought that by setting       width: auto; of top_stripe would cause that column to expand to fill up the extra space. Any ideas what I'm doing wrong here? Thanks.