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:
<div id="gesamt"> <div id="rot">Roter Container</div> <div id="gelb">Gelber Container</div> </div>
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:
#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000}
#gelb {background-color:#FFFF00}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.
#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000; float:left;}
#gelb {background-color:#FFFF00}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.
#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000;float:left; width:100px}
#gelb {background-color:#FFFF00;margin-left:100px}
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.
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:
<div id="gesamt"> <div id="rot">Roter Container</div> <div id="gelb">Gelber Container</div> </div> <div id="folgetexte">Grüner Container</div>
#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000;float:left; width:100px}
#gelb {background-color:#FFFF00;margin-left:100px}
#folgetext {background-color:#00FF00}
Schaut eigentlich wie erwartet aus oder? Wenn wir aber im roter Container mehr Inhalt einfügen, dann passiert Folgendes:
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.
#gesamt {background-color:#0000FF}
#rot {background-color:#FF0000;float:left; width:100px}
#gelb {background-color:#FFFF00;margin-left:100px}
#folgetext {background-color:#00FF00;clear:left}
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:
#gesamt {background-color:#0000FF;border:3px solid #0000FF}
#rot {background-color:#FF0000;float:left; width:100px}
#gelb {background-color:#FFFF00;margin-left:100px}
#folgetext {background-color:#00FF00;clear:left}
Aha, der gefloatete rote Container bleibt scheinbar nicht im umschließenden Container drin! Auch dieses Verhalten kann erwünscht sein.
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:
<div id="gesamt"> <div id="rot">Roter Container</div> <div id="gelb">Gelber Container</div> <div id="zusatz"> </div> </div> <div id="folgetexte">Grüner Container</div>
#gesamt {background-color:#0000FF; border:3px solid #0000FF}
#rot {background-color:#FF0000; float:left; width:100px}
#gelb {background-color:#FFFF00; margin-left:100px}
#folgetext {background-color:#00FF00; clear:left}
#zusatz {font-size:1px;clear:left}
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.)
<div id="gesamt"><br /> <div id="rot">Roter Container</div><br /> <div id="gelb">Gelber Container</div><br /> </div> <div id="folgetexte">Grüner Container</div>
#gesamt {background-color:#0000FF; border:3px solid #0000FF; overflow:hidden; width:200px}
#rot {background-color:#FF0000; float:left; width:100px}
#gelb {background-color:#FFFF00; margin-left:100px}
#folgetext {background-color:#00FF00; clear:left}
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:
* html #gesamt {height:1%}
<div id="gesamt" class="clearfix"> <div id="rot">Roter Container</div> <div id="gelb">Gelber Container</div> </div> <div id="folgetexte">Grüner Container</div>
#gesamt {background-color:#0000FF; border:3px solid #0000FF}
#rot {background-color:#FF0000; float:left; width:100px}
#gelb {background-color:#FFFF00; margin-left:100px}
#folgetext {background-color:#00FF00; clear:left}
.clearfix:after {
content:"."; clear:both; display:block; height:0; visibility:hidden }
.clearfix {display: inline-block; }
/ * Verstecke vor IE-mac \* /
* html .clearfix {height: 1%; }
.clearfix {display: block; }
/ * Ende Verstecke vor IE-mac * / Achtung im CSS Quelltext Leerzeichen zwischen / und * und zwischen * und /entfernen!!!
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.
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.
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.
<div id="gesamt">Diese Box sollte 160px breit sein</div>
#gesamt {background-color:#FFFF00; width:100px; padding:20px; border:10px solid #FF0000}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:
* html #gesamt {
width:160px;
w\idth:100px;
}
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)!