Die CSS 3 Specifikation haben ein Multi-column layout module, dass es sehr einfach macht Text in Spalten darzustellen. Zur Zeit kann nur Mozilla 1.8+ (Firefox 1.5+) CSS 3 darstellen.
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 annehmbarer Zeit einsetzten können.
Von blinden Texten
Ich bin ein Blindtext. Von Geburt an. Es hat sehr lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man ger nicht erst gelesen. Aber bin ich deshalb ein schlechter Text? Ich weiß, daß ich niemals eine Chance haben werde, im "Stern" zu erscheinen. Aber bin ich darum weniger wichtig? Ich bin blind! Aber ich bin gerne ein Text. Und sollten Sie mich jetzt tatsächlich zu Ende lesen, dann habe ich etwas geschafft, was den meisten "normalen" Texten nicht gelingt.
Aus dem blind text archiv von newmediadesigner.de.
Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.
div#multicolumn1 {
column-count: 3;
column-gap: 20px;
height: 250px;
}
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.
Mozilla definitionen: Die aktuelle Mozilla implementation benutzt einen spezial -moz- prefix.
div#multicolumn1 {
-moz-column-count: 3;
-moz-column-gap: 20px;
height: 250px;
}
Die erste Gruppe von Eigenschaften setzt die Kollonen-Anzahl und deren Breite.
column-count Anzahl Kollonencolumn-width Kollonen Breitecolumn-min-width Kollonen mindest Breitecolumn-width-policy Anzahl KollonenDie zweite Gruppe beschreibt den Abstand zwischen den Kollonen.
column-gap Abstand zwischen den Kollonen (wie padding)column-rule Rand zwischen den Kollonen (wie border)column-rule-color Randfarbecolumn-rule-style Randstylecolumn-rule-width RandbreiteDie dritte Gruppe macht es möglich, dass einzelen Elemnte mehrere Kollonen umfassen.
column-span Anzahl Kollonen die das Element umspannen