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

  1. 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.

  1. .clearfloat {
  2. display: table;
  3. width: 100%;
  4. }

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

War der Artikel für Euch wertvoll? Wollt Ihr Euch den Beitrag als Bookmark merken?
Einfach RSS-Feed abonnieren oder das Lesezeichen mit anderen Menschen teilen:

Shiatsu Ausbildung Shiatsu Therapeut

Kommentare und verweisende Trackbacks

zum Beitrag: CSS: Clearing Floats mit display:table

Kommentare

1 | Monika schreibt am 16.12.2005, 21:59:

Hi
soweit ich mal las, mag dies der IE 5/Mac nicht, wird zumindest hier behauptet:
http://www.quirksmode.org/css/display.html#table

lg
Monika

3 | Peter Linzenkirchner schreibt am 17.12.2005, 14:05:

@ Jörg: Ja und nein. Wer jetzt noch mit Mac OS 9 arbeitet, hat nicht sehr viele Möglichkeiten; in diesem Fall ist der IE einfach der beste und modernste Browser den er einsetzen kann. Das betrifft vor allem langjährige Mac-Anwender, die sich mit dem Wechsel auf OS X schwer tun. Und das sind mehr als man zunächst denkt, vor allem im grafischen Gewerbe. (Ich muss im Januar einen kompletten Betrieb auf OS X umstellen ... ) Aber natürlich verirren sich diese Leute selten in ein Blog ... Was ich damit meine: wir dürfen nicht den Fehler machen, unsere Statistiken zu verallgemeinern. Die Besucher von Weblogs sind schon eine sehr spezielle Gruppe. Und was für uns oder speziell für dein Weblog passt, muss nicht bei anderen der Fall sein. Meine Zielgruppe sind z. B. unter anderem diese konservativen Betriebe, ich darf IE 5 / Mac deshalb nicht vernachlässigen.

4 | Jens Grochtdreis schreibt am 17.12.2005, 19:27:

Ich sehe keinen Vorteil in diesem Ansatz. Entweder man nutzt den bei positioniseverything.net vorgestellten Ansatz zum "easy clearing" oder nutzt leere DIVs zum clearen. Letzteres mache ich immer, die leeren DIVs sind mir auch eine Richtschnur, ob ich alles richtig gecleart habe. Ich bin da Pragmatiker, kein Purist.

Aber der Ansatz von Veerel ist, in ein wenig veränderter Form, trotzdem gut. Da ich in letzter Zeit nur noch Float-Layouts erstelle, habe ich ein großes Problem: Firefox will kein Druckstylesheet anwenden. Dummerweise ignorieren die Mozilla-Programmierer seit mindestens drei, wenn nicht gar vier Jahren, einen ärgerlichen Bug: wenn Elemente gefloatet werden, dann druckt ein Mozilla-Broweser immer nur die erste Seite aus. Alle anderen Browser machen es richtig.

Die einzige Lösung besteht darin, das Floating aufzuheben, was eine ätzende Arbeit sein kann.
Da Firefox in einem meiner letzten Fälle auch darauf nicht ansprang, habe ich den "tragenden" DIVs ein "display: table-cell" zugewiesen und schon klappte es.

Seltsam, aber so steht es geschrieben.

5 | Monika schreibt am 17.12.2005, 23:11:

Ja und Nein Jörg,
ich bin ebenfalls eine Pragmatikerin. Wenn absolut nötig, dann würde ich auch auf dieses display table zugreifen, wenn schlimmstenfalls das Layout nicht mehr 1a aussieht. Wenn jedoch eine Technik, das Benutzen der Webseite unmöglich macht, dann würde ich sie wissentlich nicht einsetzen.

Aber wie oben ersichtlich ich habe dies noch nicht ausprobiert.

lg

7 | Monika schreibt am 18.12.2005, 22:31:

Hi ich oute mich auch als eine, die lieber Schritt für Schritt "cleart", von wegen Überblick behalten.

Zu den print CSS:
Jens weißt Du noch wo Du unbedingt dieses table cell benötigt hast?
Bis dato genügte mir ein !important. Doch wer weiß, ob ich was übersah.

Und ja das Auflösen für eine printCSS ist gute Handarbeit.;)

Jörg,
ich habe keine Ahnung wieso, doch zuvorhin war ich neugierig und wollte mir die Druckansicht Deines Blogs ansehen.
Firefox 1.07 verabschiedete sich. So einen Aufhänger habe ich selten noch erlebt.
Entweder waren ihm zuviele Tabs offen, aber die habe ich immer offen ;) oder es war was anders.
Ist dies für Dich reproduzierbar?

nächtliche Grüße
Monika

9 | Heike schreibt am 27.01.2006, 22:51:

Hallo,
vielen Dank für diesen Tipp. Ich möchte gerne meine Seite umbauen. Und genau dies hier habe ich noch gesucht, speziell für das Layout von meinen Tutorials für PI. Nun muß ich das ausprobieren, und hoffe, es klappt.
MfG
Heike

11 | Dehedin schreibt am 10.01.2007, 19:55:

Hey dieser Vorschlag hat nun endlich mein Problem gelöst !!!

Habe mehrere Spalten, alle sind in 1 Rahmen gepackt.. nun weiss ich aber nicht welche Spalte nun die Längste ist.. der rahmen soll sich aber immer verschieben..

mit dieser methode klappt dies!

12 | diedrittepobacke schreibt am 11.11.2008, 21:44:

mhh... ich finde sowas schwierig.

Ein div.clear wird vom w3c empfohlen.

Es nimmt keinen Platz weg (leeres Tag) und macht auch im IE keine Zicken.

Alles andere, wie Selektor-Hacks oder fremdverwenden von CSS-Eigenschaften, bricht dann, wenn die Browser eine (vollständige) Unterstützung bieten.

Bleibt lieber "sauber" ... das geht auch. Und der IE6 geht irgendwann ebenfalls...

diedrittepobacke

Trackback-URL: http://www.einfach-persoenlich.de/m33/etb.cgi/755

Einfach persönlich kommentieren:




Info speichern?


Bei der Formatierung hilft Textile2. - (Du kannst auch HTML verwenden)

(Achtung! Sende-Button im Vorschau-Fenster!)

Kommentare des Beitrages per RSS-Feed verfolgen?

Mit dem RSS-Kommentar-Feed kannst Du die Kommentare dieses Beitrages einfach persönlich verfolgen und im Blick behalten, einfach: