Daniel's Blog

Wenn man bei großen Bildschirmen die komplette Breite ausnutzen möchte, dann sollte man den Text mehrspaltig schreiben, denn lange Zeilen lassen sich sehr schlecht lesen. Glücklicherweise gibt es dafür Unterstützung in CSS3.

Auf kleinen Bildschirmen, werden diese Spalten dann aber sehr schmal, deshalb muss sich das Layout dynamisch an die Bildschirmbreite anpassen. Glücklicherweise gibt es auch dafür Unterstützung in CSS3 in Form von Media Queries.

Zusammengesetzt sieht das ganze dann so aus (Da es sich hierbei noch um keinen offiziellen Standard handelt, sind wieder verschiedene Versionen für die unterschiedlichen Browser nötig):

 1 @media (min-width: 1300px)
 2 {
 3   .entry
 4   {
 5     -moz-column-count: 2;
 6     -moz-column-gap: 40px;
 7     -moz-column-rule: 1px solid white;
 8     -webkit-column-count: 2;
 9     -webkit-column-gap: 40px;
10     -webkit-column-rule: 1px solid white;
11   }
12 }