Weitere Infos
Sie lesen:
LB1 (2009)
Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.
Aktuelle Infos finden Sie hier:
Webseiten gestalten mit HTML und CSS (anno 2009)
13.4.5 Float und verschieden hohe Boxen
Wenn gefloatete Boxen verschiedene Höhen haben, kann es passieren, dass einige Boxen an anderen hängen bleiben. Für das Beispiel dazu steigern Sie die Höhe von Box 1 auf 75 Pixel:
#eins {
background-color: #fff;
height: 75px;
}
Wenn das Browserfenster zu klein wird, schwebt Box 3 nicht an den linken Rand des Browserfensters, sondern bleibt an Box 1 hängen:
Abbildung 13.10: Box 3 bleibt an Box 1 hängen
Der Grund liegt darin, dass gefloatete Boxen zuerst auf der der float-Richtung gegenüberliegenden Seite ganz nach oben schweben. Bei float: left steigen sie also auf der rechten Seite des Eltern-Elements nach oben, bei float: right auf der linken Seite. Erst wenn sie oben sind, schweben sie so weit es geht in die im float angegebene Richtung:
- Box 3 schwebt auf der rechten Seite so hoch es geht, im Beispiel bis unter Box 2, weil daneben nicht genug Platz ist.
- Anschließend floatet Box 3 unterhalb von Box 2 nach links, bis sie an Box 1 stößt und dort hängen bleibt.
Auch dieses Verhalten ist eigentlich logisch, aber weder erwartet noch besonders praktisch beim Layouten. Wenn Sie zum Beispiel auf Ihren Webseiten eine Reihe von verschieden hohen Bildern floaten, bleiben diese unter Umständen aneinanderhängen.