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-Workshop: float
- Teil 2: CSS-Workshop: float
- Teil 3: CSS-Workshop: 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 Int...
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:
<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.
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; }
