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

Black Friday: Vorsicht vor schädlichen QR-Codes

Bösartige QR-Codes, die per E-Mail versendet werden, eignen sich sehr gut, um Spam-Filter zu umgehen.

15 Stunden ago

Black Friday: Zahl der ominösen Shopping-Websites steigt

Unsichere Websites und Phishing-Mails in Verbindung mit Black Friday können kauffreudigen Konsumenten zum Verhängnis werden.

15 Stunden ago

SmokeBuster bekämpft SmokeLoader

Malware SmokeLoader wird weiterhin von Bedrohungsakteuren genutzt, um Payloads über neue C2-Infrastrukturen zu verbreiten.

22 Stunden ago

Taugen Kryptowährungen als Unterstützer der Energiewende?

Bankhaus Metzler und Telekom-Tochter MMS testen, inwieweit Bitcoin-Miner das deutsche Stromnetz stabilisieren könnten.

2 Tagen ago

Supercomputer-Ranking: El Capitan überholt Frontier und Aurora

Mit 1,7 Exaflops ist El Capitan nun der dritte Exascale-Supercomputer weltweit. Deutschland stellt erneut den…

2 Tagen ago

Ionos führt neue AMD-Prozessoren ein

Der deutsche Hyperscaler erweitert sein Server-Portfolio um vier Angebote mit den neuen AMD EPYC 4004…

2 Tagen ago