CSS-Layouts, basiert auf `float` und `clear`

Allgemeines

Dieses Tutorial erklärt den Aufbau von Website-Layouts mit Hilfe von CSS und bietet die Layouts zum Herunterladen an. Es ist in zwei Abschnitte gegliedert: im Teil 1 geht es nur um Layouts, die mit Hilfe von Angaben zur Positionierung erstellt werden. Teil 2 (diese Seite) behandelt Layouts auf der Basis der Eigenschaften float und clear.

Erklärt werden zwei- oder mehrspaltige Layouts mit oder ohne Kopfteil und mit oder ohne Fußteil. Alle Layouts passen sich der Breite des Ausgabefensters an. Wer reine fließende Layouts erstellen möchte, muß die in Pixeln angegebenen Längenwerte durch Werte in Ems oder Prozenten ersetzen.

Zur besseren Erkennbarkeit sind in den Beispielen alle Elemente DIV, die dem Layout dienen, mit einem Rahmen und einem Randabstand versehen. Beides ist in der Praxis nicht immer unbedingt nötig.

Float ist die einzige Eigenschaft, mit der gleichrangige Block- Level- Elemente nebeneinander platziert werden können. Deshalb war es beim ersten Erscheinen dieses Artikels im September 2003 noch etwas ungewohnt (oder gewagt), ein ganzes Layout auf den Eigenschaften float und clear zu basieren. Dazu kommt, dass der eigentliche Zweck für float und clear nicht in der Erstellung ganzer Layouts liegt, sondern in der speziellen Positionierung einiger weniger Elemente. Seitdem hat sich aber die Unterstützung von float und clear durch die modernen Browser allgemein stark verbessert, insbesondere seit dem Erscheinen des IE 7. Deshalb steht der Erstellung ganzer Layouts mit Hilfe von float und clear heute grundsätzlich nichts mehr entgegen..

Wenn Sie möchten, können Sie sich, bevor wir anfangen, noch über die Eigenschaft float, die Eigenschaft clear, über die float-Regeln und ihre praktische Umsetzung informieren.

Anfang

Wie im Teil 1, steht auch hier wieder ein einfaches Element DIV am Anfang, das aber dieses Mal mit der Eigenschaft float positioniert ist.

Es ist sehr wichtig, dass man für alle Elemente, die man per float positionieren will, die Breite deklariert. Das Verhalten der Browser, wenn die Breitenangabe fehlt, ist nicht durch die Spezifikation beschrieben, d. h. es ist unvorhersehbar. Ebenfalls gilt dazu entsprechend das im Teil 1 über einspaltige Layouts gesagte.

Am besten geeignet sind Breitenangaben in Prozent, da sich dann das Layout automatisch an die unterschiedlichen Bildschirmbreiten anpasst. Fest vorgegebene Breiten sind eher für schmale Elemente zweckmäßig.
Beispiel 1 zeigt ein einfaches Layout, dessen Inhalt 75% der Bildschirmbreite einnimmt.

Ein mehrspaltiges Layout erstellen wir einfach, indem wir mehrere float-positionierte Elemente div nebeneinander stellen. Wenn diese Elemente mit padding, border oder margin versehen sind, müssen wir zwei Dinge grundsätzlich beachten:

Die Randabstände zwischen den Elementen sind größer als man es vom normalen Elementfluß gewohnt ist, weil der Grundsatz der 'collapsing margins' nicht zutrifft;
Beide Elemente sollten tatsächlich nebeneinander passen, da sie anderenfalls untereinander dargestellt werden. Dies hängt oft von der Bildschirmgröße ab.

Das folgende Beispiel zeigt zwei Elemente, deren Breite in Prozentwerten deklariert wurde:
Beispiel 2

Möglichst vermeiden: Mix aus absoluten Längenwerten und Prozentwerten

Die Werte der Eigenschaft width gelten immer nur für die Inhalte der Elemente, zusätzliche Angaben für margin, border oder padding werden noch dazuaddiert. So würden zwei mit width: 50%; deklarierte Elemente, die mit einem Rahmen versehen sind, nicht mehr nebeneinander passen.

Dazu kommt, dass Eigenschaften, die mit absoluten Längenwerten deklariert sind, unterschiedlich große Anteile der Gesamtbreite einnehmen können. Dies ist abhängig von der Bildschirmgröße. Beispielsweise nehmen 50 Pixel etwa 8.0 % der Breite eines 640 × 480 großen Bildschirms ein, bei einem 800 × 600 großen Bildschirm sind es 6.4 %, bei 1024 × 768 sind es 4.9 % und bei 1280 × 1024 sind es nur noch 3.9 Prozent. Das bedeutet, dass die Elemente desselben Layouts auf schmalen Bildschirmen untereinander stehen könnten, während auf größeren Bildschirmen breite leere Zwischenräume oder Ränder erscheinen.

Eine denkbare Lösung dieses Problems wäre, sämtliche horizontalen Eigenschaften, wie width, padding, border und margin, in % anzugeben. Aus verständlichen Gründen erlaubt CSS 2.1 aber nicht, Angaben der Rahmenbreite mit %-Werten zu deklarieren. Es bleiben also immer noch Unwägbarkeiten durch den Mix relativer und absoluter Längenwerte. Zusätzlich gibt es noch zwei kleine Probleme bezüglich der Darstellung durch IE/Win bis Version 6: zum einen stellt er die seitlichen (horizontalen) margins im Zusammenhang mit Floats doppelt so breit dar wie sie deklariert sind. Zum anderen lässt er vertikale margins zusammenfallen, was bei floatierten Elementen falsch ist.

Wir kommen zu einer besseren Lösung, wenn wir eine zusätzliche Schachtelungsebene einführen. Damit vermeiden wir auch IE-Spezifische Hacks, die später neue Probleme nach sich ziehen können. Wir positionieren zuerst die gewünschte Anzahl Elemente DIV per float. Deren margin, border und padding deklarieren wir explizit mit 0. Das ist genau genommen unnötig, denn alle diese Eigenschaften haben den Ausgangswert 0 , der zudem nicht vererbt wird. Diese Deklarationen dienen daher mehr der Vermeidung von Folgefehlern oder als Gedächtnisstütze. Wer das nicht braucht, kann sie ruhig weglassen.

Dann können wir die Breite aller Elemente immer so festlegen, dass die Summe genau 100% ergibt. Dadurch nutzen wir unabhängig von der Bildschirmgröße immer die gesamte zur Verfügung stehende Breite, ohne dass Lücken entstehen oder Elemente nach unten ausweichen müssen. Beim Firefox bis Version 1.5 kann noch ein 1 Pixel breiter Leerraum entstehen, der auf Rundungsfehler zurückgeht. Als Abhilfe gibt man dem Element BODY dieselbe Hintergrundfarbe wie einem der positionierten Elemente.
Beispiel 3a: zwei mit float positionierte Block- Level- Elemente ohne Inhalt.

Innerhalb jedes dieser DIV schachteln wir ein weiteres Element DIV. Diese eingefügten Elemente sind nun von der Positionierung unabhängig und füllen die ganze Breite ihres jeweiligen Elternelementes aus. Hier können wir jetzt unsere Deklarierungen für Rahmen, Außen- und Innenabstände anbringen, auch unsere Inhalte können wir innnerhalb dieser DIV eintragen.

Wenn wir einem unserer Layout-DIVs eine relativ kleine Breite gegeben haben, kann es leicht passieren, dass seine Inhalte überfließen. Gewisse Browser ändern in so einem Fall sogar willkürlich die Breite des Elements. Zur Abhilfe können wir overflow: scroll oder overflow: auto deklarieren, wie es im nächsten Beispiel gezeigt wird. Aber wer findet Scrollbalken in der Mitte der Seite schon ansprechend? Um hier unerwünschte Auswirkungen ganz zu vermeiden, sollten wir unseren Content so strukturieren, dass ausreichend Zeilenumbrüche möglich sind.
Beispiel 3b: per float positionierte Block- Level- Elemente mit geschachtelten inneren Block- Level- Elementen. Die inneren DIVs sind durch einen etwas dunkleren Hintergrund gekennzeichnet.

Mix aus `float`- und absoluter Positionierung

Es ist durchaus möglich, einen Teil des Grundlayouts einer Seite per float und einen anderen Teil absolut zu positionieren. Das Ganze funktioniert analog der Beschreibung im Teil 1, auch das Umgehungsverfahren für die Größe der seitlichen margins im IE/Win ist das gleiche. Im folgenden Beispiel ist ein größeres float-positioniertes Element mit einem margin links versehen, in dem ein kleineres absolut positioniertes Element Platz findet.
Beispiel 4

Auch die umgekehrte Variante ist möglich: ein kleineres float-positioniertes Element wird vom Text eines größeren Elementes umschlossen. Dabei kann das größere Element statisch oder absolut positioniert sein, das kleinere Element kann ein Kindelement oder ein Geschwisterelement des größeren sein. Daraus ergeben sich also vier Möglichkeiten, von denen drei für uns nutzbar sind. Die Unterschiede lassen sich gut an den folgenden vier Beispielen erkennen.

Beispiel 5a: Ein float-positioniertes Element ist Kindelement des Stammelementes und ist zugleich Geschwisterelement eines statisch positionierten, d. h. ganz normalen, Elementes. Hier fließt der Inhalt des statisch positionierten Elementes um das floatierte Element herum.

Beispiel 5b: Ein float-positioniertes Element ist Kindelement des Stammelementes und ist zugleich Geschwisterelement eines absolut positionierten Elementes. Das floatierte Element wird wie vorher nach links geschoben, das absolut positionierte Element steht unabhängig davon frei auf dem Bildschirm, entsprechend den Angaben der Positionierung.

Beispiel 5c: Ein float-positioniertes Element ist Kindelement eines statisch positionierten Elementes. Die Inhalte des statischen Elementes fließen um das floatierte Element herum.

Beispiel 5d: Ein float-positioniertes Element ist Kindelement eines absolut positionierten Elementes. Auch hier fließen die Inhalte der statischen Elementes um das floatierte Element herum (im Unterschied zum Beispiel 5b). Man sieht, dass das Float-Element praktisch mitgenommen wird, also nicht außerhalb der Grenzen dieses Elements erscheinen kann.

Kurz zusammengefasst lassen sich zwei Punkte herauskristallisieren:

Ist das Geschwisterelement eines float-positionierten Elementes absolut positioniert, fließen seine Inhalte nicht um das floatierte Element herum, bzw. nur die Inhalte von statisch oder relativ positionierten Elementen fließen um float-positionierte Elemente herum.
Die Positonierung eines floatierten Elements ist einfacher zu überblicken, wenn es ein Kindelement (nicht Geschwisterelement) des Elementes ist, dessen Inhalte um es herum fließen sollen.

Links- und rechtsseitige Ausrichtung

Block- Level- Elemente lassen sich per float nicht nur linksseitig positionieren, sondern wir haben ebenfalls die Möglichkeit, sie rechtsseitig auszurichten. In den folgenden Beispielen werden einige Möglichkeiten aufgezeigt. Die positionierten Elemente sind etwas schmaler formatiert, so dass ihre Inhalte zusammen nur 97 % der Bildschirmbreite beanspruchen. Durch die entstehende Lücke werden die Unterschiede zwischen den Beispielen erkennbar. Wenn die Summe der Breiten beider Elemente 100 % ergäbe, dann würden die Beispiele 6a, 6b und 6d gleich aussehen.

Im Beispiel 6a sind beide Elemente links ausgerichtet und das mit "red" bezeichnete Element erscheint im Dokument zuerst. Es steht deshalb links und das Element "blue" rechts daneben:
Beispiel 6a

Das folgende Beispiel bleibt bei der Aufteilung der Seite wie vorher, nur der Teil "blue" ist hier rechts ausgerichtet. Dadurch fällt rechts der Rand weg und in der Mitte erscheint eine Lücke.
Beispiel 6b

Im nächsten Beispiel sind beide Elemente nach rechts ausgerichtet. Da das Element "red" zuerst im Dokument auftritt, wird es zuerst ganz rechts positioniert, das Element "blue" als zweites links daneben.
Beispiel 6c

Damit das Element "red" nun wieder links steht, kehren wir einfach die Reihenfolge beider Elemente im Dokument um. Dadurch wird das Teil "blue" zuerst rechts positioniert, das Teil "red" im Anschluß daran links daneben.
Beispiel 6d

Daran sehen wir, dass es hier im Unterschied zur absoluten Positionierung auf die Reihenfolge der Elemente im Dokument ankommt.

Drei oder mehr Spalten

Die Vorteile der hier gezeigten Layoutmethode zeigen sich erst bei drei oder mehr Spalten. Die Ergänzung eines bestehenden Layouts ist relativ einfach: dazu brauchen wir nur dem bisher erstellten Zwei-Spalten-Layout weitere Elemente hinzuzufügen und müssen dafür sorgen, dass die Summe der Breitenangaben stets maximal 100 % ergibt. Das ist alles. Es ist nicht nötig, Außen- und Innenabstände, Breitenangaben und Rahmenstärken miteinander abzugleichen wie in dem in Teil 1 erklärten Layout.
Beispiel 7: Layout mit drei positionierten Elementen.
Beispiel 8: Layout mit vier positionierten Elementen.

Die Elemente des Layouts können beliebig untereinander ausgetauscht werden, indem man den Wert der Eigenschaft float oder die Reihenfolge der Elemente im Dokument ändert. In diesem Sinne stehen alle Elemente praktisch gleichberechtigt nebeneinander.

Seitenkopf und Seitenfuß

Auch die Einstellung eines Kopf- oder Fußteils ist mit diesem Layout einfacher. Für den Kopfteil brauchen wir nur das entsprechende Element DIV als erstes Layoutelement im Webdokument einzutragen, vor allen mit float positionierten Elementen. Damit dieses Header-Element immer oberhalb aller folgenden Elemente platziert ist, notieren wir für das erste float-positionierte Element im Dokument zusätzlich clear: both. Damit wird bewirkt, dass dieses Element weder links noch rechts neben einem vorhergehenden Element stehen kann, also zwangsweise niedriger steht. Die folgenden floatierten Elemente können nicht höher stehen als vorhergehende floatierte Elemente. Wir erreichen also damit, dass alle float-positionierten Elemente immer niedriger stehen als der Header.

Ähnlich verfahren wir mit dem Fuß der Seite. Den Footer versehen wir ebenfalls mit der Deklaration clear: both. Dadurch steht er unterhalb aller anderen Elemente auf der Seite.

Wichtig: Wenn die Konstellation anders ist, d. h. wenn die float-positionierten Elemente in anderer Reihenfolge stehen, oder wenn sie anders (rechts oder links) ausgerichtet sind, oder wenn Header oder Footer andersseitig ausgerichtet sind, kann eine weitere clear-Deklaration in einem anderen Element DIV notwendig werden.

Im Beispiel 9 ist erkennbar, wie die Layout-Elemente der Seite korrekt untereinander dargestellt sind. Header und Footer sind dort zu Demonstrationszwecken etwas schmaler als 100 % angelegt. Auch einige kleine browserspezifische Probleme mussten noch gelöst werden:

Wenn overflow: auto; deklariert ist, stellt IE/Win zwei Scrollbalken oder deren leere Flächen dar, auch wenn keine Scrollbalken notwendig ist.
Im Header und Footer ist die Deklaration overflow: auto; dennoch notwendig, da Firefox sonst im obersten margin-top-Bereich und im untersten margin-bottom-Bereich innerhalb der float-positionierten Elemente keinen Hintergrund darstellt.
In Opera 7 zeigt sich dasselbe Problem. Hier wird es gelöst, indem man ein dimensionsloses Element DIV ganz oben und ganz unten einfügt, das mit clear: both; deklariert ist.
Firefox (bis 1.5) stellt gelegentlich durch Rundungsfehler bedingte 'leere' Pixelspalten dar, deren Farbe undefiniert ist und sich beim Scrollen ändern kann.

Aus den gezeigten Layout-Beispielen lassen sich leicht noch weitere Layouts ableiten. Dazu muß aber noch einmal darauf hingewiesen werden, dass die fehlerfreie Unterstützung der Eigenschaft float in vielen Browsern noch zu wünschen übrig lässt. Insbesondere verursachen geschachtelte float-positionierte Elemente oder floatierte Elemente innerhalb von Tabellen immer wieder Darstellungsfehler. Auch das Zusammenspiel mit verschiedenen anderen HTML-Elementen kann gelegentlich zu unerwarteten und schwer erklärbaren Reaktionen führen. Deshalb gilt bei der Entwicklung von float-gestützten Layouts mehr als bei anderen Layouts: testen, testen und nochmals testen.

Webzugänglichkeit

Auch hier erhebt sich, wie im Teil 1, die Frage nach der Verbesserung der Webzugänglichkeit. Wir können aber nicht alle der dort diskutierten Maßnahmen ohne weiteres auf ein float-basiertes Layout übertragen, denn Floats lassen sich nicht innerhalb einer Website beliebig vertauschen.

Eine der dort vorgestellten Möglichkeiten war, die Reihenfolge der div-Container im Quelltext so zu vertauschen, dass der Container mit den Inhalten ganz am Anfang notiert ist und darum von den Screen- Readern auch zuerst vorgelesen wird. Das ist bei der Verwendung von Floats nur möglich, wenn dieser Container ganz am rechten oder linken Rand erscheinen soll. Dann lässt es sich durch Rechts- oder Linksfloatierung so einrichten, dass er an erster Stelle im Quelltext steht.

Uns bleibt aber immer noch die Möglichkeit, vor der Navigation einen kleinen Link mit dem alt-Text "Zum Textbeginn springen" einzubauen, oder die Navigation auf der rechten Bildschirmseite auszugeben.
TOP