CSS: Mehrspaltige Layouts mit CSS3


Mit den in CSS3 möglichen Multi-Columns nähern sich Web- und Printlayout an. Mehrspaltige Artikel mit Texten, Bildern, Tabellen, Videos und was weiß ich noch alles sind möglich. Die Zauberworte für die Umsetzung heißen column-count, column-gap, column-rule oder column-width.
Beispiel gefällig?
Auf der folgenden Demoseite findest du einen Lorem Ipsum-Artikel, der mit Bildern und einer Tabelle versehen ist und sich in 3 Spalten aufteilt. Bei keinem einzigen Element ist ein float-Wert vergeben; alle Kindelemente des umgebenen div-Elements werden gleichmäßig auf die Spalten verteilt.
Das Markup
Zunächst schreiben wir unseren Artikel, wie wir diesen haben möchten. Text, Bilder, Tabellen, vielleicht sogar ein Video, Listen, alles ist möglich.
<div class="article">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h5>Dolor sit</h5>
<table cellspacing="0" cellpadding="0" class="example" summary="Lorem Ipsum">
<thead>
<tr>
<th>Lorem</th>
<th>Ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</td>
<td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.</td>
</tr>
</tbody>
</table>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et ...</p>
<h5>Ut wisi</h5>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan ...</p>
<img src="pfad/zum/bild.jpg" alt="Lorem ipsum" />
<h5>Nam liber tempor cum soluta</h5>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing ...</p>
</div>
Das Stylesheet macht den Unterschied
Der umgebende Container mit der Klasse article wird nun in Spalten aufgeteilt. In meiner Demo sind das zwei - je nach verfügbarem Platz können es aber beliebig viele sein.
.article {
column-count:2;
/* mit Präfix für die älteren Browser */
-moz-column-count:2;
-webkit-column-count:2;
-o-column-count:2;
-khtml-column-count:2;
}
column-count
sorgt nun dafür, dass article
in zwei Spalten aufgeteilt wird. Alle Kindelemente werden so in die Spalten verteilt, dass sie sich mehr oder weniger gleichmäßig verteilen. Interessant wird es allerdings erst, wenn wir article eine feste Höhe geben. Hier verhalten sich die Browser recht unerwartet: sie tolerieren die Höhe und geben dem Container so lange weitere Spalten, bis der eingeschlossene Inhalt zu Ende ist. Dabei kann es durchaus sein, dass die letzten Spalten abgeschnitten werden und nicht mehr sichtbar sind.
Im nächsten Schritt bekommt das Spaltenset einen inneren Abstand. Die Präfix-Definitionen erspare ich mir ab sofort.
.article { column-gap:20px }
Um die Spalten gut sichtbar voneinander abzutrennen, kannst du eine Trennlinie zwischen den Spalten definieren. Die Syntax entspricht der border-Definition. Es gibt Angaben zur Breite, zum Stil und zur Farbe.
.article {
column-rule-color:#000;
column-rule-style:solid;
column-rule-width:1px;
/* und jetzt alle zusammen */
column-rule:1px solid #000
}
Diese Defnitionen werden von allen modernen Browsern interpretiert. Der Internet Explorer beherrscht diesen Regelsatz allerdings erst ab Version 9. Später dazu mehr.
Über die oben beschriebenen Standarddefinitionen hinaus gibt es noch weitere, um die Spalten zu "kontrollieren":
.article {
/* Art der Spaltenbefüllung */
column-fill:balance;
}
.article h1 {
/* Textumbruch */
break-before:column;
break-after:avoid;
break-inside:auto;
/* Spalten überspannen, z.B. für Überschriften */
column-span:all;
}
Leider interpretiert noch kein Browser die letzten Definitionen, was einen professionellen Einsatz von Multicolumns in Frage stellt. Weitere Informationen darüber hält das W3C bereit.
Und der IE?
Wie oben schon angedeutet, beherrscht der Internet Explorer die Angaben zu Multicolumns erst ab Version 9. Hier stellt sich jetzt für jeden die Frage, wie wichtig die Mehrspaltenlösung ist.
Es gibt natürlich diverse Javascript-Lösungen, die die fehlende Funktionalität nachrüstet. Wenn du bereits mit einem der großen Frameworks wie jQuery oder mootools arbeitest, kannst du selectivizr einsetzen, um dem IE CSS3 beizubringen.
Wenn du nur die Multicolumn-Funktionalität nachrüsten möchtest, dann schau dir mal das css3-multi-column.js von csscripting.com an.