24.07.2008
Wer floatet, muss auch clearen! - Teil I
Diesen altbekannten CSS-Merksatz sollte sich jeder Webmaster nicht nur hinter die Ohren schreiben, sondern möglichst groß in PC-Nähe anpinnen. Dennoch erlebt man immer wieder Überraschungen, wenn diese Weisheit nicht beherzigt wird, sucht verzweifelt nach den Ursachen wenn die Browser eine Seite unterschiedlich darstellen und langt sich an die Stirn wenn festgestellt wird, dass man den Clear-Befehl einmal wieder vergessen hat.
Hier soll eines der häufigsten Probleme mangels Clearing dargestellt werden:
Der Hintergrund wird im Firefox nicht vollständig angezeigt
Ausgangspunkt ist ein zweipaltiges Layout in einem horizontal zentrierten Wrapper nach folgendem Schema (siehe Demo)
CSS:
#wrapper
{
width: 900px;
margin: 20px auto;
border: 1px solid black;
background: #009;
}
#linksbox
{
width: 180px;
margin-left: 20px;
float: left;
display: inline; /*--für IE 6 wegen Doubled-Float-Margin-Bug--*/
padding: 5px;
background: #FFB90F;
}
#rechtsbox
{
margin: 0 20px 0 220px;
padding: 5px;
background: #FF8C00;
}
<div id="wrapper">
<h1>Box- und Hintergrundproblem im Firefox</h1>
<div id="linksbox">
<h3>Linksbox</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div><!--Ende #linksbox-->
<div id="rechtsbox">
<h3>Rechtsbox</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div><!--Ende #rechtsbox-->
</div><!--Ende #wrapper-->
Im Internet Explorer sieht die Seite "vermeintlich" richtig aus, eigentlich so, wie wir uns das vorgestellt haben:
Darstellung im Internet Explorer
Sehen wir uns die gleiche Seite im Firefox an, so kommt uns das doch ziemlich seltsam vor:
Darstellung im Firefox
Wenngleich der Firefox unsere Seite rein vorstellungsmäßig "falsch" darstellt, ist seine Anzeige dennoch richtig und korrekt.
Der Grund, weshalb der blaue Hintergrund lediglich bis an den unteren Rand der Rechtsbox reicht und nicht die Linksbox mit einbezieht ist folgender:
Da die Linksbox gefloatet ist, ist sie lt. Webstandard aus dem Fluss der HTML-Elemente herausgenommen. Sie führt sozusagen ein eigenständiges Dasein. Da sie deshalb vom allumfassenden Wrapper mit dem blauen Hintergrund nicht beachtet wird, orientiert sich dieser bei seiner Höhenanpassung lediglich an der nicht-gefloateten Rechtsbox. Folglich schließt der Hintergrund auch nur die Höhe der Rechtsbox ein und lässt die Linksbox eigenständig nach unten herausragen.
Der Firefox hält sich an diesen Webstandard und stellt unsere Demo richtig dar, wenngleich es "falsch" aussehen mag. Dagegen ist die vermeintlich richtige Darstellung im Internet Explorer gemessen am Webstandard falsch.
Das Problem lässt sich jedoch leicht beheben, indem wir uns an den eingangs erwähnten Merkspruch "Wer floatet, muss auch clearen" erinnern:
Indem wir vor dem Schließen des Wrappers noch ein Element mit der Eigenschaft clear: both; einbauen, dehnt sich unser Wrapper mit dem blauen Hintergrund so weit aus, dass er nun auch die Linksbox mit einschließt und ihre Länge berücksichtigt. Die Erklärung dafür ist folgende, wobei ich der Korrektheit wegen aus dieser Quelle wörtlich zitiere:
Also fügen wir zur Lösung des Problems und zwecks einheitlicher Browserdarstellung unserer Seite zwischen Ende Rechtsbox und Ende Wrapper folgende Ergänzung in unseren HTML-Code ein:
</div><!--Ende #rechtsbox-->
<div style="clear: both;"></div>
</div><!--Ende #wrapper-->
Man kann auch clear: left; oder für rechtsgefloatete Elemente clear: right; verwenden. clear: both; beinhaltet beides und ist deshalb universell einsetzbar.
Mitunter wird bei dieser Methode bemängelt, dass man ein leeres Div-Element verwendet, was in der Tat wenig Sinn macht.
Eleganter ist es deshalb, dem umschließenden Element (hier #wrapper) ein overflow: auto; zuzuweisen. Das ist zwar kein ausdrücklicher Clear-Befehl, funktioniert aber browserübergreifend und ist verblüffend einfach:
#wrapper
{
width: 900px;
margin: 20px auto;
border: 1px solid black;
background: #009;
overflow: auto;
}
Diese Methode entdeckte von Paul O’Brian. Sie macht das Clearen vor dem Schließen von #wrapper überflüssig. Auf <div style="clear: both;"></div> kann also verzichtet werden.
Der Wrapper reicht nun bei beiden Varianten bis ans Ende der Linksbox, so dass auch dessen blauer Hintergrund im Firefox vollständig angezeigt wird...
... zumindest bis zum nächsten Mal, wenn wir das Clearen einmal wieder vergessen sollten!
In Teil II gehts um ein Abstandsproblem beim Firefox durch fehlendes Clearing.