Schönere Seiten dank "float"

CSS-Workshop: float

Dank der float-Eigenschaft kann man bei CSS-Layouts alle Register ziehen. Der Workshop beleuchtet das Thema float in allen seinen Facetten und Feinheiten.

CSS-Eigenschaft float

© Archiv

CSS-Eigenschaft float

Float-Konstruktionen sind eine sehr sinnvolle und leistungsfähige Methode zum Gestalten kreativer, moderner Web-Layouts. Heute können alle führenden Webbrowser CSS umsetzen: Mozillas Firefox, Apples Safari, Googles Chrome, Opera und auch Microsofts Internet Explorer 8. Auch wenn Microsofts Internet Explorer 8 gerade einmal 18 von 100 Acid-3-Webstandardtests besteht und damit weit davon entfernt ist sich an die Richtlinien der W3C zu halten.

float einrichten

Die float-Eigenschaft in Cascading Stylesheets hat sehr vielseitige Einsatzmöglichkeiten. Sie erlaubt es, Block-Level-Elemente einer Webseite nebeneinander zu positionieren. Dadurch kann man zum Beispiel Textinhalte um ein Bild fließen lassen oder Navigationselemente ausrichten.

Eine einfache float-Konstruktion entsteht, indem man einem Block-Level-Element die Eigenschaft float: zuweist. Der Quelltext zu diesem Element könnte so aussehen:

.kasten {float: right;}

Nicht alle Elemente einer Website können diese Eigenschaft besitzen. Nur sogenannte Block-Level-Elemente wie Bilder (<img></img>), Bereichsunterteilungen (<div></div>), Absätze (<p></p>) oder Listen (<ul></ul>) können dank der float-Eigenschaft schweben.

Erhält ein Element die float-Eigenschaft mittels CSS zugewiesen, fließen andere Inhalte desselben Containers rechts oder links um dieses Element herum. Man kann mehrfache float-Konstruktionen und verschachtelte float-Konstruktionen einsetzen. Inline-Elemente, die keinen rechteckigen Bereich erzeugen, wie etwa Span-Tags <span></span> und Zeilenumbrüche <br/>, können die float-Eigenschaft nicht besitzen.

Der übergeordnete Container

Eine float-Konstruktion schwebt in einem Container-Element. Dabei kann es sich um einen <p>-Tag handeln, doch dieser bringt zusätzliche Abstände mit sich und möglicherweise noch andere Formatierungen. Damit sich der einschließende Tag nicht auf das Aussehen des Inhalts auswirkt, sollte man als Container-Element für Float-Konstruktionen lieber den <div>-Tag einsetzen:

CSS-Eigenschaft float

© Archiv

Durch Schließen einer float-Konstruktion erzwingt man das Anpassen des äußeren Container-Elements an die Höhe der darin enthaltenen Objekte.
<div><img src="Logo.jpg" alt="Logo des
Internet Magazins" class="float" /> Float-Workshop</div>

Um ein Bild linksbündig anzuordnen und die übrigen Inhalte des Container-Elements mit einem Abstand von fünf Pixeln rechts davon fließen zu lassen, schreibt man:

img.float { float:left;clear:
left; margin:5px;}

Damit ein rechtsbündig platziertes Element andere Inhalte links um sich herum verdrängt, verwendet man den Code:

img.float { float:right;clear:
right; margin:5px;}

float beenden

Eine der einfachsten und besonders oft genutzten Layout-Konstruktionen macht es erforderlich, eine kleine Angabe der Breite mittels eines div-Tags festzulegen. Es kann sich dabei zum Beispiel um eine Navigationsspalte oder einen Info-Kasten handeln, der in einem div-Tag enthalten ist:

<div id="aussenbereich" style=
"float:left; width:50% "><div id="innenbereich" style=
"float:left; width:25%;"><h2>Info-Kasten</h2></div><p>Absatz</p></div>

Da es sich bei dem Innenbereich um ein Block-Level-Element mit der Eigenschaft float:left; handelt, wird der übrige Inhalt rechts herum und weiter nach unten fließen. Durch die float-Konstruktion stellt man sicher, dass sich die beiden Elemente horizontal zueinanderausrichten.

Das Container-Element kann nicht die erforderliche Höhe der darin enthaltenen Inhalte ermitteln. Sollte sich herausstellen, dass der Innenbereich mehr Platz nach unten als der Außenbereich beansprucht, wird der überschüssige Inhalt des Innenbereichs unter Umständen über die Grenzen der Container-Box hinausfließen.

CSS-Eigenschaft float

© Archiv

Wurde eine float-Konstruktion nicht korrekt geschlossen, können die darin enthaltenen Objekte nach unten hinausragen.

Im Internet Explorer tritt dieses Verhalten nicht auf, vorausgesetzt, dass der Container die Eigenschaft hasLayout besitzt und einige seltene Ausnahmen nicht zutreffen. Da man nicht immer auf den Umfang der Inhalte Einfluss nehmen kann, muss man die float-Konstruktion schließen. Befinden sich mehrere Block-Level-Elemente mit der float-Eigenschaft in einem Container, werden sie nebeneinanderangeordnet, bis die float-Konstruktion geschlossen wird. Alle darauf folgenden Inhalte werden in die nächste Zeile umgebrochen. Es gibt mehrere Lösungen zum Schließen von floats.

Zusätzliches Markup

W3C empfiehlt, innerhalb der äußeren Container-Box eine zusätzliche Zeile Markup-Code am Ende des Inhalts:

<br style="clear:both"/>

Mit dieser Methode kann man sowohl links- als auch rechtsbündige floats beenden. Um nur rechtsbündige floats zu berücksichtigen, verwendet man den Code

clear: right;

Nur linksbündige floats beendet

clear: left;

Das zwingt den Container, seinen Inhalt vollständig einzuschließen, und streckt ihn über diesen Inhalt nach unten hinaus.

<div id="aussenbereich"><!-- float container --><div id="innenbereich" style=
"float:left; width:25%;"><p>Info-Kasten</p></div><p>Inhalt</p><div style="clear:both;"></div></div>

Die Methode funktioniert allerdings nicht immer. Besonders Mozilla interpretiert die Anweisung zum Beenden der float-Konstruktion nicht immer korrekt. Diese Methode hat außerdem den Nachteil, dass sie die Trennung zwischen Inhalt und seiner Darstellung aufhebt und diese gehört zu den Grundpfeilen moderner Web-Standards.

Alternativ kann man ein leeres div-Element einfügen dort, wo das float geschlossen werden soll:

<div class="clear"></div>

und dieses mittels CSS zum Schließen des floats anweisen:

div.clear { clear: both; }

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".