CSS: Float

Erstellt: 14.04.2006 | Aktualisiert: 05.01.2009

Die CSS-Anweisung float dient zur Positionierung von XHTML-Elementen. Das Prinzip zu verstehen ist nicht ganz einfach, eröffnet aber ungeahnte Möglichkeiten beim Erstellen von CSS-Layouts

Mögliche Werte

Aller Anfang ist schwer, besonders der Umgang mit der Deklaration float. Diese kann allen XHTML-Elementen zugeordnet werden und besitzt folgende Werte:

  • float:left
  • float:right
  • float:none

Mit float können Elemente an den linken oder rechten Rand anderer Elemente angeordnet werden. Aber schön der Reihe nach.

Das Prinzip

Beginnen wollen wir mit einem ganz einfachen Beispiel. Das XHTML-Dokument besteht aus einem div, welcher drei weitere div umschliesst. In diesem Beispiel wird noch überhaupt nichts gefloatet.

Nun weisen wir dem zweiten inneren div die Anweisung float: left und die Breite width: 200px zu. ACHTUNG: bei gefloateten Elementen muss zwingend eine Breite angegeben werden!

Als nächstes wollen wir alle inneren div zuerst links, dann rechts floaten lassen. Wir weisen ihnen hierfür ein float: left und die Breite width: 100px zu.

Was fällt uns auf? Wie erwartet ordnen sich die div nebeneinander auf einer Reihe an, aber scheinbar gibts mit der Hähe des äussern div ein Problem. Jedenfalls scheint dieser die inneren div nicht mehr schön zu umschliessen, wie wir das eigentlich erwarten würden. Gehen wir dieser Sache nach und füllen die inneren div mit mehr Inhalt.

Und tatsächlich! Die inneren div sind zwar noch immer schön angeordnet, allerdings scheint das mit dem äusseren Container wirklich nicht zu klappen. Nun könnte man natürlich dem äusseren div ein fixe Höhe zuweisen, was allerdings nicht viel bringt, da wir nicht wissen können wieviel Text die inneren div beinhalten.

Was ist also zu tun?

Das Zauberwort clear

Damit der äussere div die inneren umschliesst, muss das floaten beim letzten inneren Element aufgehoben werden. Dies geschieht durch die Anweisung clear: left, clear: right oder clear: both.

Es nützt! Doch was muss unternommen werden, wenn wir weiterhin alle drei inneren div floaten wollen und der äussere sie trotzdem umschliessen soll?

Nun ja, dafür gibt es zwei Möglichkeiten, wobei die zweite Variante zu bevorzugen ist:

Wir setzen kurz vor Abschluss des äusseren div ein neues leeres Element, welches mit der Anweisung clear:both versehen wird.

Oder wir wenden die Variante von Tony Ascott, Big John und Mark Hadley an. Diese ist unter den folgenden Links nachzulesen.

Die einfache Variante: overflow: auto

Schön und gut… aber da gibt’s doch noch was, oder? Dem übergeordneten Blockelement lässt sich auch die Eigenschaft overflow: auto verpassen und schwupps, der umschliessende Container wird ebenfalls vertikal ausgedehnt. Aber aufgepasst: Sind die inneren Blockelement zu breit, wird automatisch ein horizontaler Scrollbalken sichtbar.

Verwandte Snippets

Weblinks