Zwei Spalten
CSS-Layoutentwurf mit zwei Spalten.
Zweispaltige Layouts, die früher mit zweckentfremdeten Layouttabellen
ganz leicht zu realisieren waren, sind mit CSS leider nicht so einfach
umsetzbar, da der veraltete Internet Explorer auch in Version 6 noch
immer nicht das dafür benötigte display:table-cell
versteht.
Ohne diese CSS-Eigenschaft aber sind die Spalten nicht immer gleich hoch
– meist aber soll es doch so aussehen wie auf dieser Seite.
Aber es geht doch – der wichtigste Trick ist, daß der
Navigationscontainer keine Hintergrundfarbe bekommt. Es scheint hier das
Grau von body
hindurch, wodurch die Illusion entsteht, der
Container wäre immer genau so hoch wie sein rechter Nachbar.
Modernere Browser als der IE
bekommen ein echtes display:table-cell
, die Navigation darf
also eine eigene Farbe haben.
Der CSS-Code muß vor Netscape 4 und IE 4 versteckt werden.
Das nächste Beispiel setzt noch einen Seitenkopf über die beiden Spalten.
Getestet mit:
- Mozilla 1.7.x
- Firefox 0.9-1.0.6
- Opera 8.0
- Opera 7.50
- Internet Explorer 6
- Internet Explorer 5.5
- Konqueror 3.4.1
- Konqueror 3.1.5 (funktioniert nicht ganz korrekt)
Bubax