Grenzen von float sprengen

Freiheit für Ihre Layouts!

float hat seine Grenzen bei der Erstellung von Layouts. Der Workshop verrät, wie Sie diese Einschränkungen mithilfe von CSS -Tricks oder Javascript ganz einfach umgehen.

Das Mittel der Wahl für die Layoutgestaltung ist float. Ursprünglich war float hierfür aber nicht vorgesehen - und das merkt man an allen Ecken und Enden. Ein paar der Einschränkungen lassen sich elegant umgehen - und darum geht es in diesem Artikel. Sie erfahren, wie Sie über erzeugte Inhalte ein mittig angeordnetes Bild umfließen lassen, Elemente unterschiedlicher Höhe nebeneinander platzieren oder freiere Anordnungen mit Javascript realisieren.

Rechts, links – und zentriert?

Die Eigenschaft float kann die Werte left, right oder none annehmen.

float: right bewirkt zweierlei: Zum einen wird das Element selbst dadurch rechts angeordnet, zum anderen wirkt es sich auf die Inhalte der nachfolgenden Elemente aus und sorgt dafür, dass sie um das Element herum fließen. float: left ordnet entsprechend ein Element links an. float: none dient dazu, eine vorherige Angabe wie float: right zu annulieren.

Da fehlt aber eindeutig float: center. Was, wenn man also beispielsweise möchte, dass ein Bild in der Mitte angeordnet ist und rechts und links vom Text umflossen wird? Gute Frage. Dieses Layout ist in CSS 2.1 nämlich nicht vorgesehen. Man kann sich aber mit einem eleganten Trick behelfen, der von Chris Coyier stammt.

Die HTML-Struktur für ein Beispiel mit einem zentrierten Bild, das rechts und links vom Text umflossen ist, sieht folgendermaßen aus:

Codebeispiel:

<div id="wrapper">
<img src="bild.jpg" id="bild" alt=
"Bild" />
<div id="links">Text ...</div>
<div id="rechts">Text ...</div>
</div>

Es gibt ein umfassendes Element #wrapper, in dem sich zuerst das Bild befindet. Danach folgen die zwei div-Elemente für den Text, der rechts und links dargestellt werden soll.

Der umfassende Container erhält Ausmaße und wird relativ positioniert. Letzteres ist wichtig, denn so kann der Container den Bezugspunkt für die folgende Positionierung bilden.

Codebeispiel:

Dann muss das Bild in der Mitte oben positioniert werden. Das erreichen Sie, indem Sie das Bild absolut positionieren und angeben, dass es um 50 Prozent von links verschoben sein soll.

Damit befindet sich die linke Ecke des Bildes in der Mitte des Containers. Dort soll aber nicht die Ecke, sondern die Mitte des Bildes sein, daher muss das Bild um die Hälfte seiner Breite nach rechts verschoben werden. Für eine Verschiebung nach rechts geben Sie margin-left einen negativen Wert. Im Beispiel ist das Bild 300 Pixel breit, in diesem Fall ist margin-left: -150px die richtige Angabe:

Codebeispiel:

Dann werden das rechte und das linke div-Element mit einer Breite versehen - und das eine rechts, das andere links gefloatet.

Codebeispiel:

#links, #rechts {
width: 48%;
}
#links {
float: left;
}
#rechts {
float: right;
}

Das Entscheidende fehlt noch: Wir müssen den Platz für das Bild aussparen, damit der Text das Bild umfließt. Dafür kommen über CSS erzeugte Inhalte zum Einsatz. Wir erzeugen vor jedem der links und rechts platzierten Textbereiche einen leeren Inhalt als Platzhalter für das Bild. Er ist halb so breit wie das Bild und hat die Höhe des Bildes.

Codebeispiel:

#links:before, #rechts:before {
content: "";
width: 150px;
height: 300px;
}

Diese erzeugten Inhalte werden dann noch rechts beziehungsweise links gefloatet.

Codebeispiel:

#links:before {
float: right;
}
#rechts:before {
float: left;
}

Und fertig ist die Simulation von float: center! Das funktioniert natürlich nur, solange erzeugte Inhalte unterstützt werden. Einziges Sorgenkind diesbezüglich ist der Internet Explorer 7.