Unterschiedliche Darstellung von CSS-Floats bei Internet Explorer und Netscape

Eine völlig andere Seitendarstellung in unterschiedlichen Browsern war früher leider eine unabänderliche Tatsache. Von den heutigen, angeblich standardkonformen Browsern sollte man da mehr erwarten können – was sich aber leider nicht immer bestätigt.

Die Art und Weise, wie führende Browser mit so genannten Floats umgehen, ist ein solcher Fall. Hier lauert Ärger besonders für denjenigen, der versucht mehrspaltige Layouts zu erstellen, die sich dynamisch der Größe des Browserfensters anpassen.

Eine schlichte Seite ohne Floats

Angenommen man hat zwei div-Elemente (div#one und div#two) mit fester Breite: Ohne Floats oder absolute Positionierung würden diese beiden div-Elemente übereinander gestapelt am linken Rand des Browserfensters erscheinen (wie Beispiel A zeigt), weil der standardmäßige Seitenfluss von links nach rechts und von oben nach unten verläuft, wobei jedes Block-Element eine neue Reihe beginnt, die direkt unter dem vorangegangenen Element liegt.

Hier der HTML-Code für alle folgenden Beispiele:

Hier der CSS-Code für die grundlegende Version ohne Floats:

Einfache Floats

Wenn man einen CSS-Style erstellt, der die Attribute float: left oder float: right enthält, und ihn auf ein Block-Element wie den div-Tag anwendet, wird dieses div-Element aus dem normalen Textfluss des Dokuments herausgenommen und an der linken oder rechten Seite des umgebenden Elements verankert. Falls es sich um den body-Tag handelt, ist dies der Rand des Browserfensters. Ansonsten bewegt sich das Float nur bis zum Rand des umgebenden div-Elements.

Falls es mehr als ein float-Element gibt, werden das Zweite und alle folgenden Floats am Ersten ausgerichtet, ähnlich den Buchstaben in einer Zeile Text. Mehrere Floats werden in einer Reihe angeordnet – und zwar bis zur Breite des Browserfensters – und brechen dann in die nächste Zeile um wie Wörter in einem Absatz.

Floats mit fester Breite

Solange div#one und div#two beide eine feste Breite haben und ihre Gesamtbreite kleiner ist als die Breite des Browserfensters, werden sie nebeneinander dargestellt wie in Beispiel B. Die wichtigsten Browser sind einigermaßen konsistent bei der Darstellung von Floats mit fester Breite. Der folgende CSS-Code wird in IE 6, Netscape 7, Mozilla 1 und Opera 7 im Wesentlichen identisch wiedergegeben.