CSS: 100% divs left and right from content

I wanted a centered 980px wide header element with divs to the left and to the right which fill the rest of the available space. The result was supposed to look like this:

HTML:

<div id="header_wrap">
      <div id="header_left"></div>

      <div id="header">
        <div class="row">
          <div class="col-md-4"><img src="img/links.png" alt="schleife links"></a></div>
          <div class="col-md-5"></div>
          <div class="col-md-3"><img src="img/logo.png"></div>  
        </div>
      </div>

      <div id="header_right"></div>
    </div>

und das CSS:

      #header_wrap{width:100%;display:table;height:150px;margin:40px 0 60px 0}
      #header_left{display:table-cell;width:auto;background:url('img/bg_header.png') left top repeat-x}
      #header_right{display:table-cell;background:url('img/bg_header.png') left bottom repeat-x}
      #header{display:table-cell;margin:0;width:980px}

This will, of course, not work in IE8.