Unterschiedliche Darstellung von CSS-Floats bei Internet Explorer und Netscape

Das Problem inkonsistenter Darstellung von Floats tritt auf, wenn man versucht, eines der div-Elemente mit einer variablen Breite zu versehen. So könnte man zum Beispiel auf der linken Seite eine Spalte mit fester Breite für eine Liste mit Navigations-Buttons haben wollen und auf der rechten Seite eine weitere Spalte, die sich dem Browserfenster entsprechend anpassen kann.

Man könnte der Ansicht sein, dass dieser Effekt sich mit zwei links ausgerichteten Floats erreichen ließe: einem mit fester Breite und einem, dessen width-Attribut auf auto eingestellt ist, so dass es sich automatisch an den Platz zwischen dem ersten div-Element und der rechten Seite des Browserfensters anpasst. Beispiel C demonstriert den folgenden CSS-Code:

Betrachtet man dieses Beispiel im IE, erzielt man das erwartete Ergebnis: eine linke Spalte mit fester Breite und eine Spalte mit variabler Breite direkt rechts daneben. Alle anderen aktuellen Browser zeigen den Code allerdings anders an: Das zweite div-Element wird auf einmal unterhalb des ersten platziert, anstatt den Rest der Reihe bis zum rechten Rand auszufüllen. Das Ergebnis ist der Seite ohne Floats recht ähnlich.

Ein Workaround

Eine Möglichkeit den gewünschten Effekt eines zweispaltigen Layouts mit einer sich automatisch anpassenden Spalte zu erzielen, ist die Verwendung eines Floats für die erste Spalte, während man für die flexible Spalte das float-Attribut entfernt. Da die Spalte mit dem float-Attribut aus dem normalen Dokumentenfluss herausgenommen ist, wird ein normales div-Element sich oben unterhalb des Floats anordnen. Dann fügt man links Padding in der Breite des Floats hinzu, so dass der Inhalt des normalen div-Elements so erscheint, als ob er sich in einer Spalte rechts vom links ausgerichteten div-Element befindet. Beispiel D demonstriert diese Technik. Der folgende Code wird in allen aktuellen Browsern auf identische Weise dargestellt.

Obwohl die aktuellen Versionen von Netscape und Mozilla im Vergleich zum Internet Explorer eher als standardkonform gelten, scheint doch die Darstellung von Floats im IE konsistenter zu sein als die der anderen Browser. Ganz unabhängig davon, welche Darstellung nun die „richtige“ ist, bereitet allein die Tatsache, dass es Unterschiede gibt, den Web-Designern Kopfschmerzen. Sich dieser Unterschiede in der Browserdarstellung bewusst zu sein, ist der erste und wichtigste Schritt zur Vermeidung von Problemen beim Seiten-Design.