CSS: Clearing Floats mit display:table
16.12.2005 | CSS, Webdesign | 12 Kommentare | Print
Eine interessante Lösung für Clearing Floats habe ich bei Veerle im Blog gelesen. Statt der üblichen Clear-Anweisungen setzt sie display:table ein.
Clearing Floats sind in CSS-Webdesign nicht mehr wegzudenken. Gleichzeitig verursachen aber genau diese im Fluss befindlichen Design-Elemente mitunter die größten Schwierigkeiten. Meistens schaffen wir uns dies mit einem separatem Element und/oder einer Anweisung
- clear:both;
vom Hals. Wo das ggf. nicht geht, haben sich bei mir auch selfclearing Floats als bewährtes Hilfsmittel erwiesen. Diese Funktion lässt sich wie bei mir im Blog auch in einer separaten Klasse ablegen und multivalent einsetzen.
Veerl hat in ihrem Blog nun eine interessante Möglichkeit beschrieben, dies auf ähnliche Weise mit etwas Abwandlung zu tun.
- .clearfloat {
- display: table;
- width: 100%;
- }
Eine separate Klasse sorgt auch hier für einen flexiblen Einsatz im gesamten Dokument. Ein wenig mehr Quelltext schafft hier deutlich mehr Handlungsspielraum, der sonst durch mehrfache gleichlautende CSS-Anweisungen kompensiert werden müsste. Wer wenige Floats einsetzt, kann hier dann noch sparsamer umgehen.
Wie Veerls Beispiel vorher und nachher zeigt, funktioniert dies sehr gut. Es lohnt sich, diese Variante einmal näher anzusehen. Auf den ersten Blick sieht diese recht schlank aus. Lediglich die Browser-Kompatibilität wird noch zu prüfen sein.
Update:
*Web Standards Project A Final End to IE/Mac
* Pixelgraphix Der IE/Mac stirbt aus