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:


<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 id="header_right"></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}

This will, of course, not work in IE8.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.