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
Erstmals liegen Preise für Verbraucher vor. Sie zahlen weniger als Geschäftskunden. Dafür beschränkt Microsoft den…
Die Entwickler arbeiten noch an weiteren „Verfeinerungen“. Windows Insider erhalten nun wohl eine erste Vorschau…
Laut Bitkom-Umfrage werden in jedem dritten Unternehmen in Deutschland private KI-Zugänge genutzt. Tendenz steigend.
2023 erlitten neun von zehn Unternehmen in der DACH-Region Umsatzverluste und Kurseinbrüche in Folge von…
Der Report „Pacific Rim“ von Sophos beschreibt Katz-und-Maus-Spiel aus Angriffs- und Verteidigungsoperationen mit staatlich unterstützten…
NVIDIA DGX SuperPOD soll voraussichtlich Mitte 2025 in Betrieb genommen und für Forschungsberechnungen genutzt werden.