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)
Kommentar schreiben
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:

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

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