Gefloatete Elemente umschließen mit overflow:hidden

Wer anfängt, Elemente auf Webseiten mit "float" auszurichten, wird früher oder später rätselhaften Situationen begegnen, in denen die Floats scheinbar tun und lassen, was sie wollen. Dieser Artikel zeigt, wie man gefloatete Elemente komplett umschließen kann, damit sie sich so verhalten, wie man es beim Layouten gerne hätte.

Um auf Webseiten tabellenähnliche Strukturen zu realisieren, bietet sich der Einsatz von float an. Gefloatete Elemente werden aber von umgebenden Elementen nicht umschlossen. Das mag zwar harmlos klingen, sorgt im CSS-Alltag aber immer wieder für (unangenehme) Überraschungen.

Der einfachste Weg, um die gefloateten Grafiken innerhalb der umgebenden div-Elemente zu lassen, ist der Einsatz der Eigenschaft overflow mit dem Wert hidden.

Dazu wird das CSS wie folgt geändert: