3-spaltiges Layout ohne Floats
so ganz ohne Clears? ach wäre das schön …wenn man doch nur die alten IEs abschaffen könnte. Einfach auf die Müllhalde werfen :)
Denn mit der Veröffentlichung des Internet Explorers 8 wird die CSS Eigenschaft display:table unterstützt und es werden ebenso tabellenspezifische Eigenschaften unterstützt – dies war bisher nicht der Fall (IE 6/IE 7)
Man überlege sich einmal: Ein dreispaltiges Layout, mit gleicher Spaltenhöhe. Ein perfektes Grid. So ganz ohne Clears und Floats und dem ganzen Rattenschwanz von Anpassungen, der dazugehört. Funktioniert in: IE 8, Firefox, Safari sowie Opera ohne Probleme.
Hie mal ein kleiner Vorgeschmack wie das denn so ausschaut.
HTML:
<body>
<div id="page">
<div id="header"></div>
<div id="main">
<div id="navi">
Lorem ipsum dolor......
</div>
<div id="news">
Lorem ipsum dolor.......
</div>
<div id="content">
hier kommt der main content
</div>
</div>
</div>
</body>CSS:
#main {
display: table;
border-collapse: collapse; color:#ccc;
}
#navi {
display: table-cell;
width: 180px;
background-color: #000;
}
#news {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #000;
}
#content {
display: table-cell;
width: 380px;
padding-left: 10px;
} Tja nun ist es aber nun mal leider so, das every Webdesigners Darling, namens IE 6 ( 7 – in Worten: S I E B E N!!!!- Jahre alt ….) uns bestimmt noch ein paar Jährchen begleiten wird, ob wir dies nun wollen oder nicht.
Das heisst also, aus unseren neuen, wundersamen, problemlos mit CSS gestalteten Tabellenlayouts wird das so nix. Es sei denn man schreibt seine msie6.css und msie7.css wie gewohnt mit floats und weicht via Conditional Comments eben auf diese aus. Ich weiss ehrlich gesagt nicht was mehr Aufwand ist.
Bye bye du schöner Traum, willkommen Alptraum: Die Anpassung an den IE 6 , IE 7 und den IE 8.
Schreibe einen Kommentar