CSS3 Multiple Columns - Mehrspalten Layout-Modul

Die CSS3 Spezifikation haben ein Multi-column layout module, dass es sehr einfach macht Text in Spalten darzustellen.

Eigenschaften

Die erste Gruppe von Eigenschaften setzt die Kolonnen-Anzahl und deren Breite.
column-count Anzahl Kolonnen
column-width Kolonnen Breite
column-min-width Kolonnen mindest Breite
column-width-policy Anzahl Kolonnen

Die zweite Gruppe beschreibt den Abstand zwischen den Kolonnen.
column-gap Abstand zwischen den Kolonnen (wie padding)
column-rule Rand zwischen den Kolonnen (wie border)
column-rule-color Randfarbe
column-rule-style Randstyle
column-rule-width Randbreite

Die dritte Gruppe macht es möglich, dass einzelen Elemnte (Titel definitionen) mehrere Kolonnen umfassen.
column-span Anzahl Kolonnen die das Element umspannen
Diese Definition ist

Beispiel - Text aus dem Jahr 2004

Sieht vielversprechend aus das Multi-column layout module. Wenn man bedenkt, dass das Multi-column layout module, bereits im Jahr 2001 den Ursprung hatte, ist die Hoffnung eher klein dass wir dieses Modul in nächster Zeit einsetzten können.

Das W3C arbeitet derzeit an CSS3, das im Jahr 2004 noch fertiggestellt werden soll. CSS3 wird modular, was eine schnellere Weiterentwicklung der einzelnen Module ermöglicht, ohne den Standard zu ändern. Browserhersteller haben es einfacher, die einzelnen Module Schritt für Schritt zu implementieren.

Titel über alle Spalten

W3C bietet im Modul "Multi-column layout" eine Reihe von Eigenschaften an, die ein Spaltenlayout leichter möglich machen. Spalten können dem vorhandenen Platz angepasst werden, der Text fließt automatisch von einer Spalte in die nächste. Außerdem ist es möglich, ein Element über mehrere Spalten zu strecken.

CSS war am Anfang die Sprache des font-Tag Ersatzes. Unterdessen hat sie sich zu einer mächtigen Layoutsprache entwickelt. Mit dem Wissen, dass immer noch Browser der Generation 4 am Leben sind, kann man nur hoffen, dass die Browser-Hersteller nicht 6 Jahre zum Implementiern von CSS3 benötigen werden.

Syntax für column-count

div#multicolumn {
margin:0 0 20px;
column-count:3;
column-gap:20px;
column-rule:1px dotted #000;
}

h2 {
column-span:all;
}

Zusätzlich kann auch eine Kolonnenbreite column-width: 150px; definiert werden. Alle Kolonnen werden 150 pixel breit. Der Browser errechnet wieviele Kolonnen dieser Breite in die Box passen. Wenn die angegebne Kolonnen Anzahl 3 beträgt aber nur Platz für 2 Kolonnen à 250 pixel ist werden nur 2 dargestellt.
column-span wird noch nicht von allen Browsern richtig umgesetzt.

Browser

Mozilla und Webkit Browser brauchen zur Zeit noch einen Prefix für die richtige Darzustellung.

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

IE interpretiert das ab Version 10. Bis dahin wird der normale Textfluss umgesetzt.