CSS: 100% divs links und rechts vom content


July 02, 2014 at 09:58
CSS

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.

Tags: css float:center table-cell


Hinterlasse einen Kommentar: