03.12.2008/29.05.2009

Floatverhalten bei standardkonformen und anderern Browsern

Standardkonforme Browser wie z.B. der Firefox oder Internet Explorer 8 lassen den Inhalt um ein gefloatetes Element fließen. Internetexplorer bis Version 7 stellen den Inhalt in einigen Situationen dagegen komplett neben dem gefloateten Element dar. Letzteres Verhalten ist in Spaltenlayouts zwar erwünscht, entspricht aber nicht der Spezifikation.
Sehen wir uns das standardkonforme, aber optisch oft als "falsch empfundene" Verhalten näher an:

Darstellung in standardkonformen Browsern:
standardkonforme Float-Darstellung

Und so sollte es aussehen:
Float mit Abstand

Der ersten-Darstellung liegt folgender Code (auf das Wesentliche reduziert) zugrunde:

CSS:

#left {
background: #008F00;
float: left;
width: 150px;
padding: 10px;
}

#content {
background: #BFFFBF;
width: 400px;
padding: 10px;
}

HTML:

<div id="left">
<h2>Linksbox</h2>
<p>
Inhalt Linksbox
</p>
</div><!--Ende Linksbox-->

<div id="content">
<h1>Contentbox</h1>
<p>
Inhalt Content
</p>
<p>
Inhalt Content
</p>
<p>
Inhalt Content
</p>
</div><!--Ende Contentbox-->

In Demo 1 (nur in standardkonformen Browsern erkennbar) unterläuft die hellgrüne Contentbox die dunkelgrüne Linksbox, obwohl sie eigentlich durchgehend daneben angeordnet sein sollte.
Bei nicht-standardkonformen Browsern wie den älteren IE-Versionen bis IE 7 scheint die Darstellung dagegen "richtig".

Haben also ausnahmsweise die älteren Internet Explorer-Versionen einmal "Recht"?
Von der Optik her schon, von der Spezifikation her jedoch nicht.
Gefloatete Elemente sind vom Fluss der HTML-Elemente ausgenommen. Sie führen sozusagen ein eigenständiges Dasein. Die Contentbox ordnet sich also an gleicher Stelle an wie die Linksbox, nämlich in der linken oberen Ecke. Nur der Inhalt schiebt sich nach rechts und zwar nur so lange, bis die Linksbox von der Höhe her endet.
So gesehen verhalten sich standardkonforme Browser entsprechend "der Norm", auch wenn's "falsch" aussieht.

Das Problem lässt sich ganz leicht beheben, indem man der Contentbox noch einen margin-left-Wert zuweist, in diesem Fall von 170px. Dieser Wert setzt sich zusammen aus der Breite von #left mit 150px sowie den beiden padding-Werten links und rechts von jeweils 10px.
Ergänzen wir also unseren #content wie folgt:

#content {
background: #BFFFBF;
width: 400px;
padding: 10px;
margin-left: 170px;
}

Damit zeigen auch die standardkonformen Browser das gewünschte Ergebnis an, wie unsere Demo 2 zeigt.

nach oben