Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

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
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.