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

KI-gestütztes Programmieren bringt IT-Herausforderungen mit sich

OutSystems-Studie: 62 Prozent der Befragten haben Sicherheits- und Governance-Bedenken bei Softwareentwicklung mit KI-Unterstützung.

4 Stunden ago

Studie: Ein Drittel aller E-Mails an Unternehmen sind unerwünscht

Der Cybersecurity Report von Hornetsecurity stuft 2,3 Prozent der Inhalte gar als bösartig ein. Die…

3 Tagen ago

HubPhish: Phishing-Kampagne zielt auf europäische Unternehmen

Die Hintermänner haben es auf Zugangsdaten zu Microsoft Azure abgesehen. Die Kampagne ist bis mindestens…

4 Tagen ago

1. Januar 2025: Umstieg auf E-Rechnung im B2B-Geschäftsverkehr

Cloud-Plattform für elektronische Beschaffungsprozesse mit automatisierter Abwicklung elektronischer Rechnungen.

4 Tagen ago

Google schließt schwerwiegende Sicherheitslücken in Chrome 131

Mindestens eine Schwachstelle erlaubt eine Remotecodeausführung. Dem Entdecker zahlt Google eine besonders hohe Belohnung von…

4 Tagen ago

Erreichbarkeit im Weihnachtsurlaub weiterhin hoch

Nur rund die Hälfte schaltet während der Feiertage komplett vom Job ab. Die anderen sind…

5 Tagen ago