Mittels CSS kann man ganz wunderbar flexible tabellenlose Layouts basteln. Hier ein kleiner CSS FLOAT-Crash Kurs.

Vorbemerkung: Die hier gezeigten Ergebnisse, führen bei unterschiedlichen Browser zu teilweise anderen Darstellungen. Um die unterschiedliche Interpretation von CSS in den verschiedenen Browser in den Griff zu bekommen, kann man so genannte CSS Hacks einsetzen. Mehr zu den CSS Hacks am Ende dieser Seite unter der Überschrift: Gängige Browser Bugs und deren Umgehung mittels CSS-Hacks. 

Fragen zu dieser Anleitung für tabellenlose Layouts mittels CSS und float können in meinem Weblog mittels Kommentarfunktion des Artikels: Amazon Modul und Anleitung für tabellenlose Layouts mittels CSS und float gestellt werden. 

Vorbemerkung: Die hier gezeigten Ergebnisse, führen bei unterschiedlichen Browser zu teilweise anderen Darstellungen. Um die unterschiedliche Interpretation von CSS in den verschiedenen Browser in den Griff zu bekommen, kann man so genannte CSS Hacks einsetzen. Mehr zu den CSS Hacks am Ende dieser Seite unter der Überschrift: Gängige Browser Bugs und deren Umgehung mittels CSS-Hacks.

Nehmen wir an, wir möchten einen einfachen Zweispalter erstellen. Das HTML-Grundgerüst sollte dafür wie folgt ausschauen:

Quelltext HTML:

Ergebnis:

Damit das Ganze visuell etwas besser sichtbar wird, weisen wir nun mittels CSS jedem DIV-Container eine Hintergrundfarbe zu. Der äußere DIV Container mit der ID "gesamt" soll blau, der erste innere DIV Container soll "rot" und der zweite innere DIV Container soll "gelb" werden. Gesagt getan:

Quelltext CSS:

Ergebnis:

Die CSS Eigenschaft: float

Nun möchten wir den roten Container, der selbstverständlich auch durch einen anderes HTML Element ersetzt werden könnte (z.B. p, img, iframe), mittels der CSS float-Eigenschaft nach links positionieren, sodass ihn der gelben Container und auch dessen Inhalt umfließen kann.

Quelltext CSS:

Ergebnis:

Die CSS Eigenschaft: margin

Möchten wir, dass der gelbe Container den roten Container nicht umschließt, dann können wir dem roten Container eine Breite mittels "width" und dem gelben Container einen linken Außenrand mittels "margin" zuweisen. Sollte der rote Container aus einem HTML Element bestehen, welches von Haus aus eine Breite besitzt z.B. ein img-Tag, dann kann die Breitenangabe für den roten Container entfallen.

Quelltext CSS:

Ergebnis*:

Wir müssen also dem roten Container eine Breite zuweisen und dem gelben Container einen linken Rand. Nun wird auch der äußere blaue Container sichtbar. Als unerwünschten Nebeneffekt erhalten wir in den Internet Explorer Versionen kleiner 7 (nur bei IE < 7 sichtbar) einen 3 Pixel Fehler (Vergleich gelben Container Zeile 1 und Zeile 2). Mehr dazu im Abschnitt: Browser Bugs und CSS Hacks.

Fußzeile mit CSS erstellen

Was passiert aber, wenn wir nach unserem blauen Container einen Folgetext, also einen Text der unter unserem blauen Container steht haben möchten? Erweitern wir einfach das HTML-Grundgerüst:

Quelltext HTML:

und die den CSS Quelltext:

Ergebnis*:

Schaut eigentlich wie erwartet aus oder? Wenn wir aber im roter Container mehr Inhalt einfügen, dann passiert folgendes:

Ergebnis:

Dieses Verhalten des Folgetextes (grüner Container) könnte natürlich durchaus gewünscht sein, aber mann stelle sich vor der grüne Container solle eine Fußzeile darstellen. In diesem Fall wäre das Verhalten unerwünscht. Wir können dem nun mit verschiedenen Methoden und Tricks entgegenwirken. In der Fachsprache spricht man von "clearen", das heißt wir wollen das Umfließen beenden.

Wir benutzen folgenden CSS Quelltext:

Ergebnis:

Der grüne Container steht nun unter dem gefloateten roten Container.

Der eine oder andere Leser wird sich nicht erst jetzt fragen wo den der blaue Container geblieben ist? Machen wir ihn mit einem blauen Rahmen sichtbar. Wir verwenden:

CSS Quelltext:

Ergebnis:

Aha, der gefloatete rote Container bleibt scheinbar nicht im umschließenden Container drin! Auch dieses Verhalten kann erwünscht sein.

Gefloatete Container umschließen

Will man mit dem umschließenden blauen Container auch den gefloateten roten Container umschließen, dann kann man folgende Methoden bzw. Tricks benutzen. Alle Methoden bzw. CSS-Tricks haben Vor- und Nachteile:

Methode 1 - ein zusätzliches Element einfügen:

Quelltext HTML:

CSS Quelltext:

Ergebnis**:

Leider ist für diese Methode eine zusätzliches HTML-Element nur für Layoutzwecke notwendig. Außerdem kann diese Methode dazu führen, dass im IE der Peekaboo-Bug ausgelöst wird. (Dieser Bug bewirkt, dass im umfassenden Container Elemente teilweise nicht angezeigt werden, aber bei gewissen Operationen wie Änderung des Browserfenster wieder auftauchen.)

Methode 2 - Overflow einsetzen

Quelltext HTML:

CSS Quelltext:

Ergebnis:

Bei dieser Methode muss wegen der Internet Explorer Versionen kleiner 7 (IE < 7) für den umfassenden blauen Container eine Breitenangabe gemacht werden. Alternativ könnte mittels eines CSS-Hacks und zwar mit dem sogenanten Tan-Hack (Tantek) nur für die IE < 7 dem umfassenden blauen Container eine Höhe von 1% zugewiesen werden also:

Methode 3 - mittels spezieller CSS-Klasse ein clear Element einfügen

Quelltext HTML:

CSS Quelltext:

Ergebnis:

Diese Methode beinhaltet so einige CSS-Tricks für den IE, sie funktioniert aber recht zuverlässig. Der große Vorteil: man braucht keine Breitenangabe für den umschließenden blauen Container.

Gängige Browser Bugs und deren Umgehung mittels CSS-Hacks

Leider weisen viele Browser vor allem der Internet Explorer (IE) Fehler bei der Umsetzung von CSS auf. Diese Browser Bugs kann man mit sogenannten CSS-Hacks (CSS Tricks) umgehen.

Boxmodell Fehler IE < 6

Der IE < 6 berechnet das Boxmodell falsch. Laut W3C Spezifikation muss sich die Gesamtbreite eines Container aus Breite+Innenabstand+Rahmenstärke+Außenrand ergeben. Der IE < 6 berechnet die Gesamtbreite aber aus Breite+Außenrand, die Innenabstände und Rahmenstärken werden nicht auf addiert. Beim IE 6 kann man zwischen dieser falschen Berechnung und der korrekten Berechnung mittels Dokumentweiche umschalten, was aber das Problem nicht löst, wenn man nicht nur für den IE 6 programmieren möchte.

Quelltext HTML:

CSS Quelltext:

Ergebnis:

Lösung um trotz Boxmodell-Fehler auch für den IE 5 die gewünschte Breite zu erhalten

Wir wollen für unseren Container eine Breite (width) von 100px, einen Innenabstand (padding) von 50px und eine Rahmenstärke (border) von 20px definieren. Die korrekte Breite ergibt sich wie folgt:
Gesamtbreite=100+2*30+2*10=160
Weil der IE 5 den Innenabstand und die Rahmenstärke nicht mit rechnet ergibt sich für den IE 5 die Gesamtbreite wie folgt:
Gesamtbreite=100
Um diesen Sachverhalt zu korrigieren, müssen wir nur für den IE <6, mittels des Tan-Hack und einer speziellen Schreibweise für die Breite (w\idth) die nur der IE ab Version 6 versteht, eine Breite (width) von 160px vorgeben:

Ergebnis:

Bemerkung: Der Boxmodell-Fehler wirkt sich also nur aus, wenn einem Element eine Breite (width) + Innenabstand (padding) oder + Rahmenstärke (border) zugewiesen wird. Daraus ergibt sich die Alternative Lösung: Einfach die Kombination von Breitenangabe und Innenabstand oder Rahmenstärke bei dem gleichen Element vermeiden.

Bemerkung2: Der Boxmodell-Fehler gilt natürlich auch für die Höhe (height)!

Problem 3 Pixel Bug - IE thre Pixel Gab*

Dieser IE-Bug tritt nur beim IE < 7 auf. Er verschiebt die Textzeile um 3 Pixel, wenn neben dem Text ein gefloatetes Element liegt. Endet das gefloatet Element so verschiebt sich die Textzeile nicht mehr und es ensteht eine kleine 3 Pixel Stufe. Beispiel:

Quelltext HTML:

und die den CSS Quelltext:

Ergebnis mit 3 Pixel Bug*:

Die Lösung:

Ergebnis ohne 3 Pixel Bug:

Peekaboo Bug**

Der IE < 7 lässt Elemente manchmal verschwinden, wenn das umfassende Element eine float-Eigenschaft und sich innerhalb ein clear-Element befindet. Die Elemente werden durch scrollen oder ändern des Browserfensters wieder sichtbar.

Quelltext HTML:

CSS Quelltext mit Peekaboo-Bug:

Ergebnis mit Peekaboo-Bug im IE:

Lösung (hilft auch für Escaping Floats Bug):

Ergebnis ohne Peekaboo-Bug:

Double Margin Bug

Der IE < 7 verdoppelt bei gefloateten Elementen die Außenränder (margin), wenn der Ausrand in die gleiche Richtung wie der Float geht.

Quelltext CSS mit Double Margin Bug:

Ergebnis mit Double Margin Bug:

Lösung:

Man verwende zusätzlich zu den gewünschten CSS Eigenschaften die Eigenschaft display:inline also:

Ergebnis ohne Double Margin Bug:

Ich hoffe dieser CSS Float Crash Kurs ist für den einen oder anderen Leser nützlich. Deine Meinung, Kritik, Hinweise oder sonstige Kommentare werden hier gerne gesehen (gelesen)!