Mario Sedlak
Software
Computer
Hauptthemen

Problem mit "float: right"

Auf meiner Website verwende ich ein Seitenlayout, das sich an die Größe des Browser-Fensters anpasst. Z. B. ist auf der Seite Radfahren der Text maximal 600 Pixel breit und die Bilder sollen rechts vom Text sein, wenn im Fenster genug Platz ist. Ist das Fenster zu schmal, sollen die Bilder in den Text fließen, um horizontales Scrollen zu vermeiden. Die Bilder platziere ich hierfür in einem <div> mit dem CSS-Befehl float: right.

So sollte es aussehen

Screenshot

Und so sah es in Firefox 3.0.5 aus

(inzwischen habe ich das Problem behoben)

Screenshot

Die Bilder stehen im Text und verdrängen diesen, obwohl rechts genug Platz wäre. Dieses Problem ist in früheren Firefox-Versionen nicht vorhanden. In Firefox 3.0.5 fließt ein <div> offenbar nicht mehr so weit nach rechts wie die max-width des Elternelements erlaubt. Stattdessen orientiert sich Firefox 3.0.5 an der Breite des größten Blocks, der im gleichen Elternelement vorkommt. In meinem Fall sind das die Textblöcke.

Abhilfe

Ursache für obiges Verhalten war, dass ich im <div id="main"> den Stil position: absolute verwendete. Damit wird der so genannte "Shrink-To-Fit"-Modus aktiviert, der bewirkt, dass nicht die volle Breite genützt wird. Das kann man den recht komplizierten Angaben der CSS-Spezifikation entnehmen. Ältere Firefox-Versionen haben das offenbar nicht normgemäß umgesetzt. Ich verwendete position: absolute, weil die Darstellung im Internet Explorer 6 sonst nicht richtig ist.

Alternativ könnte man auch eine leere Zeile am Ende der Seite platzieren, die mit vielen &nbsp; oder kleinen, unsichtbaren Platzhaltergrafiken auf die gewünschte max-width gebracht wird.