CSS-Tabelleneigenschaften nutzen

Jetzt, wo der IE6 von Microsoft offiziell als vollkommen böse und auch der IE7 als uncool angesehen ist, können wir so langsam dazu übergehen, all diejenigen CSS2.1-Eigenschaften auch tatsächlich zu verwenden, von denen man bisher nur theoretisch und hinter vorgehaltener Hand geredet hat, gewissermaßen.

Eine sehr praktische Sache sind die Eigenschaften display: table und display: table-cell. Und zwar beispielsweise immer dann, wenn man eine unbekannte Anzahl von Elementen in der Horizontalen nebeneinander platzieren möchte, und darauf aus ist, dass eine gewisse Gesamtbreite immer exakt eingehalten wird. Bestes Beispiel sind horizontale Navigationen, so wie auf der Website des PIA e. V.:

PIA 2

PIA

Die Breite der einzelnen li-Elemente sind im CSS gar nicht festgelegt. Statt dessen bekommt das ul ein display: table verpasst, und seine lis ein hübsches display: table-cell. Die Breite von ul ist auf eine bestimmte Pixelanzahl festgezurrt, und die lis richten sich dann automatisch so aus, dass sie zusammen genau diese Breite bekommen.

Wenn nun dem Kunden einfällt, dass er einen oder zwei Hauptmenüpunkte mehr oder weniger benötigt, ist dies absolut kein Problem!

(Als Fallback-Lösung für IE6 und IE7 sollte man natürlich mit Floats arbeiten, muss dann aber leider doch wieder eine feste Breite vergeben, damit es einigermaßen aussieht.)