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.

Page: 1 2

ZDNet.de Redaktion

Recent Posts

Microsoft nennt weitere Details zu kostenpflichtigen Patches für Windows 10

Erstmals liegen Preise für Verbraucher vor. Sie zahlen weniger als Geschäftskunden. Dafür beschränkt Microsoft den…

13 Stunden ago

Microsoft verschiebt erneut Copilot Recall

Die Entwickler arbeiten noch an weiteren „Verfeinerungen“. Windows Insider erhalten nun wohl eine erste Vorschau…

1 Tag ago

GenKI im Job: Mitarbeitende schaffen Tatsachen

Laut Bitkom-Umfrage werden in jedem dritten Unternehmen in Deutschland private KI-Zugänge genutzt. Tendenz steigend.

1 Tag ago

97 Prozent der Großunternehmen melden Cyber-Vorfälle

2023 erlitten neun von zehn Unternehmen in der DACH-Region Umsatzverluste und Kurseinbrüche in Folge von…

1 Tag ago

„Pacific Rim“-Report: riesiges, gegnerisches Angriffs-Ökosystem

Der Report „Pacific Rim“ von Sophos beschreibt Katz-und-Maus-Spiel aus Angriffs- und Verteidigungsoperationen mit staatlich unterstützten…

2 Tagen ago

DeepL setzt erstmals auf NVIDIA DGX SuperPOD mit DGX GB200-Systemen

NVIDIA DGX SuperPOD soll voraussichtlich Mitte 2025 in Betrieb genommen und für Forschungsberechnungen genutzt werden.

2 Tagen ago