CSS3 Columns

Depending on the browser you are using, you might or might not see four columns in the following piece of gibberish:


Woorth, ind fremetgon sinro an, Irlihtende minis iro un sin. Thenin in drusten Godes geberge woorth In woorth in heilig. Ne drusten iro selvon ut, gehugenisse geweldig ginathe sia, dages fan volwonende gereini withirlon. Furkundit rechtlika stemmen fan hande in sig thenin naht rata misdadi in geweldig gihorda fortha. Fan behuodende brudegomo, drusten sie suottera fremetgon woorth hande utgant the durtikin. Ringis in, utgant sinro geweldig wezen diroma hoon ogum. Ewa wisduon fortha cund herta iro wie! Golt, wisduon erthon, an ist geblithande, selim Godes sinro herta ginathe Godes? Irlihtende thenin geweldig endron werk an ewa Irlihtende hoi thero in, dinicero virnimit naht allere mundis dages behuodende bemillam. Ne festi werthon, wrisil fremetgon, in fremetgon bemillam hande thenin fan himili un min te golt an, tegenwoordicheyt sig hande, sig sinro iro Godes.


This is an example of the multiple column capability of CSS3. If you don't see columns, then your browser isn't yet able to support CSS3 columns and that's the dilemma you face. To know which browsers do or do not support this new feature of CSS, take a look at this compatibility table.

For the above example, I placed a simple piece of CSS as Page Code Injection:

.col4 {

-webkit-column-count: 4;

-moz-column-count: 4;

column-count: 4;

}

and placed the text as a Raw HTML object between surrounding DIV markers, thus:

<div class="col4">…</div>

Of course, I could have used inline CSS, as follows:

<div style="-webkit-column-count: 4;-moz-column-count: 4;column-count: 4;>…</div>

The advantage of the CSS3 approach is that it is very simple; the disadvantage is that you might run up against older browsers. You pays your money and takes your choice.

For more information on CSS3 multiple columns, see this W3schools.com page.

© David Neale 2011