Vorstellung von Techniken, um Mehrspaltigkeit mit CSS flexibel umzusetzen (Überarbeitete Fassung)

Inhaltsübersicht

1. Vorbemerkungen
   1. Spaltenlayout im Webdesign
   2. Die Layouttabelle
   3. Wunschliste für ein CSS-Layout – Warum überhaupt wechseln?
   4. Klassisches Spaltenlayout aus der Sicht des Designs
2. Schritte zu einem CSS-Spaltenlayout
   1. Wechsel zu CSS-Layout mittels float
   2. Einfache float-Bereiche
   3. Mehrspaltigkeit mit float
   4. Gleich lange Spalten simulieren
   5. Flexible Spaltenlängen
   6. Einschließen von float-Boxen
   7. Kombinationslösung
   8. Zwischenfazit
   9. Verschachtelte Mehrspaltigkeit
   10. float-Umgebungen verschachteln
   11. Wunderwaffe overflow? – Block Formatting Contexts
   12. Von der Theorie zur Praxis
   13. Der Internet Explorer, ein Universum für sich
3. Abschließendes
   1. Fazit
   2. Yet Another Multicolumn Layout
   3. Vorzüge der Mehrspaltigkeit mit CSS
   4. Die Zukunft von CSS

Vorbemerkungen

Spaltenlayout im Webdesign

Spaltenlayout gehört seit langem zum gestalterischen Repertoire des Webdesigns. Dabei werden zunächst einmal rechteckige Boxen horizontal nebeneinander angeordnet. Viele Layouts gliedern das Dokument auf diese Weise in zwei oder drei große Spalten, um Inhaltsbereiche mit unterschiedlichen Funktionen voneinander zu trennen und in Beziehung zu setzen (z.B. Navigationsspalte – Inhaltsspalte). Diese logische Aufteilung sorgt für eine kompakte Präsentation und gibt die Struktur des Inhalts durch eine deutliche optische Trennung wieder.

Die Layouttabelle

Die traditionelle Methode zur Umsetzung eines solchen Grundgerüsts ist die Layouttabelle. Mit relativ wenig Code lässt sich damit seit fast einem Jahrzehnt ein robustes Spaltenlayout erzeugen. Manche große Sites wie etwa Heise Online setzen auch tatsächlich seit zehn Jahren auf diese Strategie. Lässt man die vierte Browsergeneration außen vor, so bietet eine solche Tabelle passable Formatierungsmöglichkeiten mittels CSS.

Diese altbewährte Technik ist uns hinreichend bekannt und gehörte vor einigen Jahren noch zum alltäglichen Handwerkszeug. Einige der Eigenschaften einer solchen Tabelle sind echte Features, andere erweisen sich als unerwünschte Nachteile:

• Die Spaltenbreiten werden automatisch gemäß der Breite des jeweiligen Inhalts aufgeteilt, wenn keine Spaltenbreiten angegeben sind.
• Bei schmalem Viewport (der Bereich des Fensters, der dem Dokument zur Verfügung steht) passt sich das Layout nicht dem engen Raum an. Die Mehrspaltigkeit wird immer erzwungen. Sie kann zwar mittels CSS aufgehoben werden (display:block für die Tabellen-Elemente), dies unterstützen aber nur standardkonforme Browsern. Insbesondere für ein Druck-Stylesheet ist eine solche Linearisierbarkeit wichtig.
• Die Spaltenbreiten können flexibel in Pixeln, Prozent der Viewport-Breite oder auch in em angegeben werden.
• Selbst bei schmalem Viewport erzwingt der Inhalt eine Mindest-Spaltenbreite. Es kommt damit nicht zu Überlagerungen oder abgeschnittenem Inhalt aufgrund von extrem schmalen Spalten. Eher muss horizontal geblättert werden.
• Alle Spalten sind gleich hoch und beginnen und enden auf gleicher Höhe. Nebeneinander liegen gleich hohe Rechtecke. Rahmen, Hintergründe und Abstände bleiben damit stets konsistent.
• Der Zelleninhalt kann in Bezug auf die Gesamthöhe vertikal ausgerichtet werden (oben, mittig, unten).
• Jede Spalte kann beliebig viel Inhalt enthalten. Die Gesamthöhe der Tabelle passt sich der längsten (höchsten) Spalte an.
• Die Reihenfolge der Spalten im Quelltext ist festgelegt (von links nach rechts). Dies bestimmt unweigerlich die linearisierte Darstellung.

Von der beschriebenen einen Tabelle, die das Grundgerüst eines obersten Spaltenlayouts bildet, sind die vielen Layouttabellen zu unterscheiden, die sich unweigerlich einstellen, wenn jedes horizontales Nebeneinander mit Layouttabellen gelöst wird.

Wunschliste für ein CSS-Layout – Warum überhaupt wechseln?

Die Gründe für einen möglichst umfassenden CSS-Einsatz wurden schon oft diskutiert. Es ist nicht Thema dieses Artikels, die Frage nach den allgemeinen Möglichkeiten, Vorteilen und Konsequenzen von CSS-Layout zu behandeln. Dennoch soll auf diese Grundlagen kurz eingegangen werden, denn ihr Verständnis ist nötig, um speziell die Vorzüge von Spaltenlayout mit CSS zu verstehen.

Der Wechsel zu CSS heißt nicht einfach, andere gleichwertige Techniken einzusetzen, um haargenau denselben Zweck (in diesem Fall Spaltenlayout) zu erreichen. Das Layouten mit CSS geht von einer geweiteten Perspektive aus, die andere Kriterien einbezieht. Erst dadurch erschließen sich die schwerwiegenden Nachteile des Tabellenlayouts. CSS spielt dann nicht mehr nur die Rolle eines bloßen Erfüllungsgehilfen, sondern bringt eine eigene Arbeitsweise mit sich.

Dem CSS-Layout liegt das elementar wichtige Konzept der konsequenten Trennung von Textauszeichnung und Präsentationslogik zugrunde. Die Möglichkeiten, die sich daraus ergeben, sollen hier nicht erschöpfend besprochen werden. Der HTML-Code soll jedenfalls möglichst aufgeräumt und flexibel gegenüber unterschiedlichen Präsentationen sein, anstatt eine bestimmte zu determinieren. Spaltenlayout ist nur eine mögliche Präsentation, nicht die einzig mögliche. Man geht davon aus, dass die Website unter verschiedenen Bedingungen gelesen und bedient wird.

Diese Vielfalt der Zugangstechniken und Ausgabemedien bringt eine Reihe von Anforderungen an das Webdesign mit, denen Layouten mit Tabellen nicht gerecht wird. Wie gesagt schreibt eine Layouttabelle die Mehrspaltigkeit im Markup fest. Eine Umformatierung mit CSS und insbesondere eine Linearisierung (das heißt eine Darstellung der Spalteninhalte untereinander statt nebeneinander) sind schwer möglich. Die wichtige Reihenfolge der Inhalte im Quellcode ist bei der Layouttabelle ebenfalls festgelegt – und zwar oft sehr ungünstig. Dies macht nicht nur ein sinnvolles Druck-Stylesheet unmöglich, sondern sorgt auch für eine schwierige Navigation, wenn die Tabelle linearisiert wird: Etwa bei Tastaturbedienung, im Zusammenhang mit Benutzer-Stylesheets für Sehbehinderte, in Screenreadern und auch in mobilen Endgeräten wie PDAs und Smartphones.

Das CSS-Spaltenlayout, deren Grundlagen in diesem Artikel erarbeitet werden sollen, kann nicht nur die optischen Effekte eines Tabellenlayouts erzielen, sondern auch deren negative Eigenschaften zugunsten neuer Fähigkeiten auflösen. Am Ende des Artikels werden wir die Errungenschaften resümieren.

Klassisches Spaltenlayout aus der Sicht des Designs

Die Layout-Fähigkeiten von CSS gehen unzweifelhaft über Spaltenlayout hinaus. Die float-Techniken, die im Folgenden vorgestellt werden, erlauben ein ausgefalleneres und kreativeres Design als traditionelles Spaltenlayout. Wie gesagt soll es nicht Thema dieses Artikels sein, all diese Möglichkeiten vorzustellen und damit die Leistungsfähigkeit von CSS zu demonstrieren. Bevor wir uns aber speziell der Umsetzung eines Spaltenlayouts widmen, soll angemerkt werden, dass ein CSS-Layout nicht auf diese Gestaltungsmitteln begrenzt ist und auch nicht darauf begrenzt werden sollte.

Spaltenlayout ist ein sowohl im positiven als auch im negativen Sinne konservatives Gestaltungsmittel. Molly Holzschlag schildert in ihrem Artikel Thinking Outside the Grid das Dilemma von Design, das alle Inhalte in ein Raster einsortiert, wie es bei Spaltenlayout der Fall ist. In diesem Raster-Denken sind wir gefangen, obwohl es aus der längst überwundenen Zeit stammt, als Tabellen das einzige Layoutmittel waren. Einerseits bietet das Raster Orientierung:

Grid-based design can be extraordinarily useful in creating sites that are predictable, easily navigated, and visually appealing. Grids are really good at helping designers to plan where things go, and easy for site visitors to use.

Andererseits fehlt durchgeplanten und starren Raster-Layouts jegliche Spontaneität, wodurch sie unorganisch und leblos wirken. Frisches und leichtfüßiges Design bewegt sich bewusst jenseits dieser Konventionen und nutzt die neuen Mögichkeiten aus, die CSS bietet:

[C]ompelling visual work can result from breaking out of the rigid system that the Web’s design and development environment has, to date, retained. … What we're just beginning to understand - particularly those of us who come to CSS layouts after years of working with tables - is that the visual model for CSS is far more conducive to breaking out of the grid and designing for discrete, semantic elements.

Mollys Lösung dieses Dilemmas ist nicht, das konventionelle Raster-Layout einfach zu verwerfen. Ihr ist es wichtig, dass alle Möglichkeiten offen stehen und auch besonnen genutzt werden sollten:

The beauty and challenge of working with modern layouts is that now we have options. With CSS, we have a means of creating manageable, lightweight, visually rich designs that can be grid designs if we want them to be. But we can also easily deconstruct the grid or dispense with it entirely.

This opens up a world of opportunity for the contemporary web designer. But the remaining challenge is to think in terms of these options rather than falling back on grid designs just because they’re familiar.

Dies weist wiederum darauf hin, welche prinzipiellen Mehrwerte eine CSS-Umsetzung bietet. Neben dem Spaltenlayout, das hier vorgestellt wird, sind beliebige andere Präsentationen möglich allein durch einen Wechsel des Stylesheets.

Schritte zu einem CSS-Spaltenlayout

Wechsel zu CSS-Layout mittels float

Am Anfang des Wechsels steht die Erkenntnis, dass CSS 2 von sich aus keine Technik bereitstellt, mit der sich Spaltenlayout einfach und ohne Weiteres realisieren lässt. Es gibt keine Eigenschaft, die einem Element das typische Verhalten einer Spalte zuweist und keine Eigenschaft, die direkt für die Anordnung in Spalten sorgt.

Es gibt zwar die Möglichkeit, beliebigen Elementen mittels CSS das Verhalten von Tabellen-Elementen zu geben (display:table, display:table-row, display:table-cell). Diese wird allerdings nur von neueren Browsern hinreichend unterstützt. Außerdem brächte dies einige der Nachteile mit sich, die wir bei gewöhnlichen HTML-Layouttabellen festgestellt hatten.

Anhand der folgenden Beispiele soll der Weg zu einem klassischen Spaltenlayout mit CSS nachvollzogen werden. Da es zunächst um die von Browser-Eigenheiten unabhängige CSS-Theorie gehen soll, setzen die Beispiele einen möglichst standardkonformen Browser voraus, speziell Firefox 1.5. Erst im Anschluss wird den Eigenheiten der verbreiteten Browser Rechnung getragen (siehe Von der Theorie zur Praxis). Die folgenden Beispiele sind daher bewusst nicht gebrauchstauglich, sondern didaktisch reduziert und zugespitzt.

Einfache float-Bereiche

Neben position ist float die CSS-Eigenschaft, mit der Mehrspaltigkeit überhaupt möglich wird. float erlaubt erst einmal nichts anderes, als eine Block-Box links oder rechts zu positionieren, sodass der darauffolgende Inhalt auf der anderen Seite vorbeifließt. Die float-Box wird aus dem Elementfluss genommen und die folgenden Boxen »fließen« um sie herum. float ist also nicht direkt für eine Mehrspaltigkeit ausgelegt, wie wir sie beabsichtigen – wie gesagt kann float viel mehr als nur dies. Wollen wir float für klassisches Spaltenlayout benutzen, so sind verschiedene zusätzliche Tricks nötig.

Um später ein Zwei-Spalten-Layout zu erreichen, wird der Inhalt – im Beispiel nur Blindtext – mit zwei div-Elementen gegliedert. Das erste div-Element soll die erste Spalte werden, das zweite die zweite Spalte. Das erste div-Element erhält float:left und eine feste Breite.

Beispiel 1

Hier zeigt sich, dass float alleine noch keine Mehrspaltigkeit im gewünschten Sinne erzeugt. Die Box mit float:left enthält weniger Text und ist schmaler, sodass sie vertikal schon vor der Box des zweiten div-Elements endet. Der Text im zweiten div-Element fließt unterhalb der float-Box wie gewohnt auf der gesamten Breite.

Damit wird der Raum optimal ausgenutzt und das Layout erzwingt die Mehrspaltigkeit nicht. Dies ist im Grunde ein besonderer Vorteil, denn bei einem schmalen Viewport erscheinen die Spalten untereinander.

Mehrspaltigkeit mit float

Klassische Mehrspaltigkeit ordnet die Spalten in nebeneinander liegenden, sich nicht überschneidenden Rechtecken an. Um dies mit float zu erreichen, muss dafür gesorgt werden, dass die Box des zweiten div-Elements horizontal erst nach dem Ende der float-Box beginnt.

Dies wird für gewöhnlich mit margin-left für das zweite div-Element gelöst, wie auch der SELFHTML-Abschnitt Mehrspaltige CSS-basierte Layouts beschreibt.

Beispiel 2

Erst jetzt entsteht der Eindruck von zwei Spalten. Zudem wird die Mehrspaltigkeit erzwungen. Damit keine horizontale Bildlaufleiste erscheint, muss der Viewport mindestens so breit sein wie die linke Spalte zuzüglich einer Mindestbreite für die rechte Spalte.

Eine Alternative zu margin-left ist die Verwendung der overflow-Eigenschaft mit einem anderen Wert als visible. Dadurch wird die Box ein eigener Block Formatting Context – darauf wird später noch eingegangen.

Beispiel 3

Diesen recht unbekannten Effekt von overflow erklärt Gunlaug Sørtun.

Gleich lange Spalten simulieren

Die so entstehenden Spalten sind allerdings nicht gleich lang. Die Boxen umfassen erst einmal nur den jeweiligen unterschiedlich umfangreichen Inhalt. Es muss festgestellt werden, dass es mit CSS nicht möglich ist, beide Boxen robust und zuverlässig auf die gleiche Höhe zu bringen. Es gibt allerdings verschiedene Methoden, mit denen sich derselben optische Eindruck erwecken lässt. In diesem Punkt greift man tief in die Trickkiste, um das Unmögliche zumindest scheinbar möglich zu machen.

Angenommen, die linke Spalte soll einen andersfarbigen Hintergrund haben und die beiden Spalten soll eine Linie trennen. In dem Fall werden die beiden div-Elemente in einen weiteren div-Container eingefasst. Dieser erhält die gewünschte Hintergrundfarbe. Die linke Spalte bekommt einen transparenten Hintergrund, die rechte Spalte eine Hintergrundfarbe, die von der des Containers abweicht.

Beispiel 4

Heraus kommt die Illusion von zwei gleich hohen Rechtecken. Die float-Box ist nichtsdestoweniger nur so hoch, wie deren Inhalt es erfordert.

Eine andere Möglichkeit ist ein linker Rahmen für die rechte Spalte, der genauso breit ist wie die linke Spalte. margin-left wird also ersetzt durch border-left. Als Rahmenfarbe wählt man die gewünschte Hintergrundfarbe für die linke Spalte.

Beispiel 5

Eine weitere Trennlinie zwischen den Spalten würde ein zusätzliches div-Element erfordern, das den gesamten Inhalt der rechten Spalte umfasst.

Eine dritte Methode bedient sich einer Hintergrundgrafik für den div-Container. Sie erlaubt eine größere Gestaltungsvielfalt, da sie nicht auf das CSS-Konzept des einfarbigen Hintergrunds bzw. Rahmens angewiesen ist. Das Stichwort hierzu lautet Faux Columns. Dazu muss die linke Spalte allerdings eine feste Pixelbreite besitzen. Prozentwerte sind auch möglich, wie Faux Columns for Liquid Layouts demonstriert. Auch ein Beispiel in SELFHTML erzeugt auf diese Weise die Illusion gleich langer Spalten.

Eine vierte Methode spielt recht abenteuerlich mit riesigem padding-bottom und kompensierendem negativem margin-bottom: Equal Height Columns - revisited.

Flexible Spaltenlängen

Alle bisherigen Überlegungen gingen davon aus, dass die linke float-Spalte in jedem Fall kürzer dargestellt wird als die rechte. Die rechte Spalte und damit der Container reichte vertikal viel weiter, sodass unter der float-Box leerer Raum entstand.

Jede Spalte soll allerdings beliebig viel Inhalt enthalten können, der Container soll sich in der Höhe der längsten Spalte anpassen. Dies ist bei den bisherigen Beispielen nicht gegeben. Je nach der Menge des Blindtextes in der linken Spalte kann sie höher werden als die rechte. In diesem Fall lappt sie über den Container hinaus.

Beispiel 6

Einschließen von float-Boxen

Um das Überlappen der float-Box zu verhindern, bekommt der Container die Eigenschaft overflow mit einem anderen Wert als visible. Erneut machen wir uns die Eigenschaft zunutze, dass overflow einen eigenen Block Formatting Context erzeugt. Denn dadurch werden alle Kindelemente mit float-Funktion eingeschlossen. Die Box des Containers wird automatisch entsprechend vergrößert. Auf diese Weise wird die rechte Spalte zur kürzeren.

Beispiel 7

Diese Methode beschreibt unter anderem Anne van Kesteren.

Es gibt noch zwei weitere Methoden, um für die automatische Höhenanpassung zu sorgen. Sie arbeiten beide mit einer Box am Ende des Containers mit der Eigenschaft clear:left. Bei der ersten Methode fügt man ein Element in das Markup ein, dessen Box letztlich die Höhe 0 hat, etwa ein leeres div-Element.

Beispiel 8

Eleganter ist es, diese Box mittels CSS automatisch einzufügen, genauer gesagt über das Pseudoelement :after und die Eigenschaft content. Zur Verdeutlichung hat die eingefügte Box einen schwarzen Hintergrund:

Beispiel 9

Auch hier kann die letztliche Höhe 0 ergeben, sodass man nichts vom eingefügten Inhalt sieht, aber trotzdem der clear-Effekt wirkt:

Beispiel 10

Diese Methode wird ausführlich im Artikel Einschließen von Floats ohne zusätzliches Markup beschrieben (englisches Original: How To Clear Floats Without Structural Markup).

Kombinationslösung

An diesem Punkt lässt sich eine Verbindung zur Frage nach den gleich hohen Spalten herstellen. Denn wenn wir die besagte clear-Box an das Ende der rechten Spalte verlagern, schlagen wir zwei Fliegen mit einer Klappe: Die rechte Spalte ist immer die längste. In dem Fall, in dem ursprünglich die linke Spalte höher ist, passt sich die rechte ihrer Höhe an. Für den Fall, dass die rechte Spalte ursprünglich länger ist, können die besagten Methoden angewendet werden, um eine gleiche Höhe simulieren. Zudem hat der Container immer die Höhe der höchsten, rechten Spalte, er schließt also die float-Box ein.

Beispiel 11

Zwischenfazit

Durch diese Methoden kommen wir zu einem flexiblen Zwei-Spalten-Layout mit CSS:

• Spaltenbreiten können flexibel in Pixeln, Prozent der Viewport-Breite oder auch in em angegeben werden.
• Bei schmalem Viewport reagiert die Mehrspaltigkeit nicht automatisch durch eine linearisierte Darstellung, bei der die zweite Spalte unter der ersten erscheint. Eine Linearisierung ist mit CSS aber problemlos möglich.
• Zum Beispiel bei Spaltenbreiten in Prozent und extrem schmalem Viewport kann es zu Überlagerungen bzw. zu abgeschnittenem Inhalt kommen.
• Nicht immer sind alle Spalten wirklich gleich lang. Aber eine Spalte ist mit Sicherheit die längste, sodass die meisten gewünschten Effekte zuverlässig anwendbar sind.
• Der Spalteninhalt kann ohne Weiteres nicht in Bezug auf die Gesamthöhe vertikal ausgerichtet werden.
• Jede Spalte kann beliebig viel Inhalt enthalten, der Container umschließt die gesamte Spaltenstruktur.
• Die Reihenfolge der Spalten im Quelltext ist frei wählbar.

Damit wären schon die wichtigsten Forderungen der Wunschliste erfüllt.

Verschachtelte Mehrspaltigkeit

Innerhalb des großen Spalten-Grundgerüsts ist oft eine weiteres Nebeneinander erwünscht, um ähnliche, gleichförmige oder anders zusammenhängende Inhalte miteinander zu Beziehung zu setzen. Auch zu diesem Zweck ist float zunächst das Mittel der Wahl und es gelten weitesgehend dieselben Anforderungen wie an die Mehrspaltigkeit auf der obersten Ebene.

Während gleich hohe Spalten in diesen Fällen seltener gewünscht sind, ist das Einschließen von float-Boxen und damit das gezielte Aufheben von Mehrspaltigkeit essentiell. Dazu können erneut die vorgestellten Methoden mit overflow bzw. clear zur Anwendung kommen. Die folgenden Beispiele demonstrieren jeweils beide Methoden.

Beispiel 12

Die clear-Methode, die für gleich lange Spalten notwendig ist, zeigt in diesem Beispiel einen Nachteil. Das clear wirkt ohne weitere Vorkehrungen »global«. Wird clear in der rechten Spalte verwendet, wird die gesamte Mehrspaltigkeit zerstört. Die eingefügte, unsichtbare clear-Box wird erst nach dem Ende der linken Spalte positioniert.

float-Umgebungen verschachteln

Hier treffen wir auf ein Problem, das Ingo Turski in Unterschiedliche Interpretation von 'clear' anspricht. Wie kann man es erreichen, dass das clear nur die innere Mehrspaltigkeit auflöst, nicht die äußere?

Der kommende CSS-Standard Version 2.1 definiert, dass clear nicht immer global wirkt, sondern nur auf alle float-Boxen im gegenwärtigen Block Formatting Context.

Es gibt verschiedene CSS-Eigenschaften und Eigenschaftswerte, die dazu führen, dass ein Element als eigener Block Formatting Context angesehen wird. Darunter float selbst und overflow mit einem anderen Wert als visible. Genau wie bei der overflow-Methode bekommt nun der div-Container der clear-Methode overflow:hidden. Er wird dadurch zum eigenen Block Formatting Context und clear wirkt darin »lokal«.

Beispiel 13

Das Einschließen der float-Box ist somit bei beiden Methoden durch overflow:hidden gesichert. Die clear-Methode hat in diesem Fall nur noch die Aufgabe, die Höhe der rechten Spalte an die der linken anzupassen.

Damit sind alle Grundsteine gelegt.

Wunderwaffe overflow? – Block Formatting Contexts

Die overflow-Eigenschaft führt momentan ein Schattendasein und gehört wohl zu denjenigen CSS-Eigenschaften, die am wenigsten verwendet werden. Die meisten wissen nicht, dass sie neben der offensichtlichen Funktion weitere Nebenwirkungen hat, die man sich zu Nutze machen kann. Wir fassen zusammen, für welche Zwecke wir overflow:hidden bei den bisherigen Beispielen verwendet haben:

1. Erzeugung eines eigenen Block Formatting Contexts für die vorbeifließenden Spalte,
   • damit diese Spalte rechts neben der float-Spalte positioniert wird (Ersatz für margin-left),
   • damit in dieser Spalte float und clear »lokal« wirken.
2. Erzeugung eines eigenen Block Formatting Contexts für den umschließenden div-Container,
   • damit alle float-Boxen eingeschlossen werden und der Container automatisch vergrößert wird.

Im CSS-Standard sind keine direkten Eigenschaften für die Verhaltensweisen »float-Boxen einschließen«, »float und clear wirken lokal« und »keine Überlagerung mit float-Boxen erlauben« vorgesehen. Wir reizen daher das CSS-interne Konzept des Block Formatting Contexts aus, um auf Umwegen dieses Verhalten auszulösen.

Es gibt ferner genausowenig eine CSS-Eigenschaft »als Block Formatting Context behandeln«. Als Auslöser dient jeweils overflow:hidden. Diese »Nebenwirkungen« von overflow mit einem anderen Wert als visible sind zwar im CSS-Standard verankert. overflow stellt dabei aber lediglich eine Behelfslösung dar: Wir denken um zwei Ecken und zweckentfremden eine Technik, die eigentlich einen anderen Effekt hat.

Im Falle von overflow birgt dieses Vorgehen einige Schwierigkeiten: Man will zwar nur die Nebenwirkungen, bekommt unweigerlich aber die Hauptwirkungen. So wird bei overflow:hidden der Inhalt abgeschnitten, sobald er größer ist als der zur Verfügung stehende Bereich. Eine mögliche Alternative ist overflow:auto, was in einem solchen Fall zumindest zur Anzeige von Bildlaufleisten führt.

Von der Theorie zur Praxis

Bisher haben wir nur die Theorie behandelt, wie sie vom Musterschüler Mozilla Firefox 1.5 umgesetzt wird. Doch wie sieht es mit der Browserkompatibilität aus?

• Mozilla Firefox 1.0.7: keine Fehler
• Konqueror 3.5.0: keine Fehler
• Safari 2.0: keine Fehler
• Opera 8.51 versteht die Beispiele weitesgehend problemlos. Er wendet lediglich den unteren Rand (margin-bottom) des letzten p-Elements in der float-Spalte auf die eingefügte clear-Box an. Dadurch entsteht ein schmaler Abstand am Ende der float-Spalte.

Mit früheren Versionen müsste noch getestet werden.

Der Internet Explorer, ein Universum für sich

Der Internet Explorer 6 verhaut die Beispiele erwartungsgemäß. Es sind verschiedene Hacks und Tricks nötig, damit er das Layout dennoch umsetzt. Unterwegs tauchen einige weitere berüchtigte IE-Bugs auf, die ebenfalls berücksichtigt werden müssen. Dieser Prozess wird hier nicht rekonstruiert, denn er wird in den bereits verlinkten Artikeln eingehend beschrieben. Die wichtigsten IE-Probleme sind folgende:

1. Der IE 6 versteht overflow für die vorbeifließende Spalte nicht in der Weise, dass die Spalte als Rechteck ohne Überlappung neben der float-Spalte positioniert wird. Der IE kennt allerdings ein internes Layoutkonzept namens hasLayout, das dem Block Formatting Context im CSS-Standard ähnelt. Denn wenn eine Box »Layout hat«, wird sie wie gewünscht neben der float-Spalte positioniert.
2. Der IE 6 versteht das Einschließen von float-Boxen mittels overflow für den div-Container nicht. Auch dabei hilft hasLayout weiter: Wenn eine Box »Layout hat«, schließt sie alle float-Boxen ein.
3. Die clear-Methode, die mittels CSS automatisch eine Box am Ende der rechten Spalte einfügt, funktioniert im IE 6 nicht. Man muss wie beschrieben ein leeres div-Element einsetzen (oder es z.B. durch JavaScript nachträglich einfügen).

Ein Großteil des Workarounds für den IE besteht also darin, bei verschiedenen Elementen des Layouts hasLayout zu erzwingen. Das Beispiel nutzt dazu height:1%. Die IE-spezifischen
CSS-Regeln binden wir über Conditional Comments ein.

Der Internet Explorer 7 löst die ersten beiden beschriebenen Fehler. Lediglich die dritte Anpassung ist nach wie vor nötig,
um den Effekt der gleich langen Spalten zu erzielen. Denn auch Version 7 unterstützt noch nicht CSS-generierte Inhalte mit :after und content. Deshalb ist das leere div-Element mit clear-Funktion weiterhin nötig. Unsichtbar für andere Browser wird es mittels Conditional Comments im IE 6 und 7 eingeblendet.

Beispiel 14

Durch diese grundlegenden Hacks setzt der IE 6 und der kommende IE 7 das Beispiel größtenteils um. Es verbleiben verschiedene kleinere Probleme bei der Darstellung. Ebenso treten erfahrungsgemäß beim praktischen Einsatz weitere Schwierigkeiten auf, deren Untersuchung noch ausstünde. Der IE 5.x wurde erst einmal gänzlich ausgeklammert.

Abschließendes

Fazit

Die vorgestellten Grundlagentechniken haben sich als essentiell bei komplexem CSS-Layout erwiesen. Sie ermöglichen eine flexible Mehrspaltigkeit und eine entsprechende gestalterische Freiheit, wie sie bei Tabellenlayouts selbstverständlich ist, früheren CSS-Layouttechniken aber fehlte. Verschachtelte float-Umgebungen werden damit zu einem mächtigen Werkzeug.

Gleichzeitig muss zugestanden werden, dass es erst einmal einmal aufwändig ist, sich in die CSS-Theorie und die deprimierende Browser-Praxis einzuarbeiten. Im oberflächlichen Vergleich scheint die Tabellen-Umsetzung <table id="layouttabelle"><tr><td id="links">links</td><td id="rechts">rechts</td></table> einfacher zu verstehen und zu implementieren. Doch ein solcher Vergleich ist irreführend. Wenn man den Wechsel zu CSS-Layout lediglich unter dem Gesichtspunkt betrachtet, ob das Verhalten einer einfachen Layouttabelle korrekt nachgebildet wurde, so wird man der Sache nicht gerecht. CSS und Tabellen können nicht als gleichwertige, alternative Techniken für Spaltenlayout gehandelt werden, denn hinter CSS steht eine grundlegend andere Arbeitsweise. Wie schon eingangs erwähnt, hat reines CSS-Layout mit seiner konsequenten Trennung von Inhalt und Präsentation eigentümliche Vorteile.

Yet Another Multicolumn Layout

Die Thematik wurde hier bewusst nur anhand von gestellten Beispielen behandelt. Denn das Zusammensetzen der Grundtechniken zu einem praxistauglichen Baukasten hat bereits Dirk Jesse mit Yet Another Multicolumn Layout geleistet. Gleichzeitig ist YAML ein einzigartiges Tutorial, das den Weg von den hier vorgestellten Grundlagen zu einem äußerst flexiblen Layout-Grundgerüst Schritt für Schritt erklärt. An der Vielseitigkeit einer ausgereiften Lösung wie YAML werden erst alle Vorteile von CSS-Layout sichtbar.

Mit der Vorarbeit des YAML-Frameworks lässt sich verschachtelte Mehrspaltigkeit auch für Einsteiger einfach und zuverlässig umsetzen. Dadurch kann man sich auf die Gestaltung konzentrieren, anstatt sich auf elementarster Ebene mit den vorgestellten CSS-Techniken herumzuschlagen, die erst rudimentäre Mehrspaltigkeit ermöglichen.

Vorzüge der Mehrspaltigkeit mit CSS

In Anbetracht von Praxislösungen wie YAML sollen noch einmal die Errungenschaften der CSS-Umsetzung rekapituliert werden (siehe Warum überhaupt wechseln? und Zwischenfazit), ohne alle grundlegenden Vorzüge der CSS-Arbeitsweise zu nennen.

Es kam bereits zur Sprache, wie wichtig eine freie Anordnung der Inhalte im Quellcode ist. Bei YAML ist die Reihenfolge der Spalteninhalte im Quelltext … vollkommen unabhängig von der Positionierung der Spalten am Bildschirm. Dadurch ist ein komfortables Lesen auch dann gewährleistet, wenn die Inhalte nacheinander aufgenommen werden. Mit YAML können ohne Änderungen am HTML-Code neue Layoutvarianten erzeugt werden, die etwa den Anforderungen eines speziellen Ausgabemediums gerecht werden. Stylesheets für die Druck-Ausgabe und die Darstellung auf Handhelds können die Mehrspaltigkeit einfach linearisieren. YAML arbeitet zwar mit float und bedient sich der vorgestellten Techniken, ermöglicht aber viel mehr als klassisches Spaltenlayout.

Ein kleinerer Vorteil, den Dirk Jesse ebenfalls in den
YAML-Features nennt, ist die schnelle Darstellung eines CSS-Layouts im Vergleich zu einem Tabellenlayout. Denn eine Tabelle kann erst auf dem Bildschirm dargestellt werden, wenn alle Spalten bereits übertragen wurden.

Die Zukunft von CSS

Gegenüber Tabellenlayout wird gerne der Vorwurf erhoben, die Verwendung zu Layoutzwecken sei eine Zweckentfremdung oder sogar ein Missbrauch. Auch wenn dieser Vorwurf abgehoben und akademisch klingt, so weist er doch auf praktische Probleme hin, die wir mit dem CSS-Layout zu beseitigen suchten.

Die nötigen Tricks bei CSS-Umsetzung weisen derweil darauf hin, dass Spaltenlayout mit CSS noch nicht so geradlinig möglich ist, wie es sein könnte. Dem erarbeiteten CSS-Layout muss ebenfalls eine kreative Zweckentfremdung bescheinigt werden, insbesondere was das umständliche Tricksen mit den Block Formatting Contexts angeht. »Zweckentfremdung« ist zunächst wertfrei gemeint, denn Webdesign lebt davon, »in Ketten zu tanzen« und die vorhandenen, unvollkommenen Techniken auszureizen.

An dieser Stelle sei auf zwei W3C-Arbeitsentwürfe hingewiesen, die am 15.12.2005 veröffentlicht wurden. Mit diesen zukünftigen CSS-Techniken soll Spaltenlayout viel einfacher umzusetzen sein.

• Advanced Layout
• Multi-column layout