CSS: 100% divs links und rechts vom content

Mein Header Element soll 980px breit sein und natürlich zentriert. Links und rechts brauche ich DIVs die den Rest des Platzes ausfüllen. Das ganze wollte ich ohne Tables, ohne JS nur mit CSS lösen, damit das Endergebnis so aussieht:

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}

Dürfte natürlich im IE8 und drunter nicht gehen, da muss man sich dann eine Sonderlösung überlegen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.