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.

Am Beispiel einer kleinen, tabellenfreien Bildergalerie zeigt Ihnen dieser Artikel, wie man dieses in der Literatur als "Containing Floats" bekannte Problem einfach und zuverlässig lösen kann.

Rückblick: Schwebende Boxen mit float

Zunächst ein kurzer Rückblick: Float ist eine CSS-Eigenschaft, die die Werte left oder right annehmen kann. To float heißt schweben und ein gefloatetes Element macht der Reihe nach drei Bewegungen:

1. Es erhebt sich aus dem normalen Fluss ("Flow") der Elemente.

2. Es schwebt wie ein losgelassener Heißluftballon innerhalb des umgebenden Elementes so weit wie möglich nach oben.

3. Oben angekommen driftet es soweit es geht nach links oder rechts.

Die Grundlagen der Positionierung mit CSS und der Anwendung von float können Sie bei Bedarf in den folgenden Artikeln nachlesen: