Keywords

Positionierung mit floats

Wenn man einem bestimmten Element die Eigenschaft float:left oder float:right gibt, so wird dieses erstmals aus dem Document Flow herausgenommen und nach links bzw. nach rechts "verschoben" bis es am Rand des nächstübergeordneten Elementes "ansteht".

floating prinzip

Im linken Bild gibt es ein allgemeines div-Element, das grau eingefärbt ist und darin 3 untergeordnete div-Elemente, die jeweils eine fixe Breite, Höhe und eine unterschiedliche Farbe gesetzt haben. Gemäß des Document-Flows wird jedes dieser div-Elemente (da divs Block-Level Elemente sind) in jeweils einer Zeile untereinander dargestellt.

Beispiel: 3 divs ohne float

Versieht man davon den ersten div mit der Eigenschaft float:right (dargestellt im rechten Bild), so wird dieser aus dem Document Flow genommen (div2 und div3 rutschen nach oben nach) und der gefloatete div rutscht nach rechts, bis er am grauen übergeordneten container-div ansteht.

div1 nach rechts gefloated

Wenn man nun den zweiten div auch nach rechts floated (ihm auch float:right zuordnet), dann rutscht der dritte div ganz nach oben und der zweite div wird nach rechts verschoben bis er - nun nicht am übergeordneten div, sondern am vorherigen nach rechts gefloateten Element ansteht:

div1 und div2 nach rechts gefloated

D.h. man kann soviele Elemente nebeneinander floaten als Platz auf dem Bildschirm ist. Sobald nicht mehr alle gefloateten Elemente in eine Reihe passen, wird einfach eine nächste Reihe begonnen. Etwas im ersten Moment unerwartetes passiert, sobald man im Beispiel auch das dritte div-Element floated: nachdem es das letzte im Document Flow verbliebene Element im grauen div ist, und es mit dem Setzen eines floats auch aus diesem Flow herausgenommen wird, ist der graue div nunmehr lehr - und klappt zusammen (er "collapsed"). Im Beispiel sieht man ihn nur noch, weil er einen Rahmen und eine Hintergrundfarbe gesetzt hat. Diesem Umstand muss man bei CSS-basierten Layouts noch mehr Aufmerksamkeit zollen

alle drei divs gefloated

Eine weitere gewöhnungsbedürftige Eigenschaft von Floats sei hier noch erwähnt: Gefloatete Elemente werden zwar aus dem Document Flow herausgenommen (d.h. allgemein gesagt rutschen die anderen Elemente an den verbleibenden Platz), aber mit einer Ausnahme: Text wird von gefloateten Boxen "verdrängt" - und kann somit nicht von den gefloateten Elementen überlagert werden.

ein links gefloatetes div-Element "verdrängt" Text

 Möchte man, dass ein Element auf jeden Fall nach einem anderen gefloateten Elemente dargestellt wird (unabhängig davon, ob hinter dem gefloateten Element noch Platz ist, kann man das erreichen, indem man diesem Element die Eigenschaft clear setzt: entweder clear:left, um nach einem links gefloateten Element, clear:right um nach einem rechts gefloateten Element und clear:both, um nach links UND rechts gefloateten Elementen dargestellt zu werden. Zum besseren Verständnis je 1 Beispiel:

Link gefloatetes div, zweiter div cleared nicht

Links gefloatetes div & rechts gefloatetes div, dritter div clear:left

Links gefloatetes div & rechts gefloatetes div, dritter div clear:both

Module, die für die Durchführung vorausgesetzt werden