Spalten mit CSS

by Jens Grochtdreis

HTML

<p>Ich bin nur ein kleiner Blindtext. Wenn ich groß 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. Wenn ich groß 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. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.</p>

<p>Ich bin nur ein kleiner Blindtext. Wenn ich groß 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. Wenn ich groß 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. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.</p>

<p>Ich bin nur ein kleiner Blindtext. Wenn ich groß 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. Wenn ich groß 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. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.</p>

<p>Ich bin nur ein kleiner Blindtext. Wenn ich groß 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. Wenn ich groß 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. Wenn ich groß bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen.</p>

<p>Ich bin nur ein kleiner Blindtext....

CSS

body {
    -webkit-column-count: 3;
    -webkit-column-width: 32%;
    -webkit-column-rule: solid #ddd 1px;
    -webkit-column-gap: 10px; 
/* doesn't make a fucking difference
    -webkit-column-fill: auto;
    -webkit-column-fill: balance;
*/
    
    -moz-column-count: 3; 
    -moz-column-width: 32%;
    -moz-column-rule: solid #ddd 1px;
    -moz-column-gap: 10px;
/*
    -moz-column-fill: balance;
*/
    -moz-column-fill: auto;
    
    column-count: 3;
    column-width: 32%;
    column-rule: solid #ddd 1px;
    column-gap: 10px;
    
/*
    column-fill: auto;
    column-fill: balance;
*/
    
    /* styling basics */
html {padding: 20px 0; background-color: #efefef;}
body {width: 80%; padding: 40px; margin: 0 auto; background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5); font-family: Verdana, Arial, sans-serif; font-size: 14px;}

/* clearfix */
.clearfix:after { clear:both; content:"."; display:block; font-size:0; height:0; visibility:hidden; }
.clearfix { display:block; } /* extra for Safari */
.clearfix { *height:1%; }  /* trigger hasLayout for IE6 + 7 */