Gefloatete Elemente umschließen mit overflow:hidden

Gefloatete Elemente komplett umschließen, damit sie sich so verhalten, wie man es beim Layouten gerne hätte

5
(3)
Stand: 12. April 2007

float-Positionierung und das Problem

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" bekanntes 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:

Mitglied werden

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen.

Sind Sie sich noch unsicher? Dann wählen Sie die Option “akademie.de kostenlos testen”. So können Sie sich 14 Tage in Ruhe umschauen. Downloads stehen Ihnen in dieser Zeit nicht zur Verfügung. Gefällt Ihnen akademie.de nicht, reicht ein formloser Widerruf per E-Mail innerhalb der ersten 14 Tage. Es entstehen für Sie keine Kosten. Widerrufen Sie nicht, erhalten Sie nach Ablauf von 14 Tagen vollen Zugriff und der Mitgliedsbeitrag wird abgebucht.

Ich bin bereits Mitglied
Mitglied werden!
Ich entscheide mich für folgende Zahlungsweise:

Sehr praktische Übungen mit Code und Bildern zum Nachschauen und Nachahmen.

Inhalt

Downloads zu diesem Beitrag

Über den Autor:

bild117259

Peter Müller, Dozent und Autor, beschäftigt sich bereits seit 1995 mit dem Web und veröffentlichte zahlreiche Bücher rund um das Thema Webpublishing. Seine Erklärungen sind nicht ausschließlich für E ...

Newsletter abonnieren