Multiple Column Layouts

17.03.2008 ,

It’s been three years now since Mozilla announced support for CSS column control and I am yet to see any sites using it. I am aware of course that until there is widespread support for CSS3 and that I shouldn’t expect to see much usage of column-count, column-width and column-gap, but no sites? Surely someone has had a play.

A demonstration of these nifty rules is in need methinks. The CSS used here is shown. Needless to say these examples don’t work in Internet Explorer, they do work in Firefox and Safari.

Two Column Examples


.twoColumnExample
{
/* For the Firefox users */
-moz-column-count: 2;
-moz-column-gap: 20px;

/* Safari's implementation */
-webkit-column-count: 2;
-webkit-column-gap: 20px;

/* to make it stand out from rest of the article  */
padding: 2em;
border: 1px solid #ccc;
}

And the result:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus congue vulputate lacus. Phasellus sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam nisi lectus, lobortis non, dictum non, ultricies et, tellus. Nunc dapibus tristique ligula. Donec viverra, ligula in vulputate vehicula, erat enim viverra risus, et porttitor sapien massa vitae tortor. Praesent nisl. Integer iaculis sem eget turpis. Duis pede mauris, vulputate in, aliquet vitae, aliquam non, orci. Morbi vitae est sed urna convallis congue. Aenean velit. Mauris quis lorem. Donec diam sapien, malesuada eget, fringilla non, placerat interdum, ipsum. Sed ullamcorper neque vel sapien. Maecenas adipiscing enim sed nisl. Mauris vestibulum congue elit. Nunc faucibus.

Simple CSS beauty. But how about some more styling to see this in action.



.twoColumnExample
{
/* For the Firefox users */
-moz-column-count: 2;
-moz-column-gap: 20px;

/* Safari's implementation */
-webkit-column-count: 2;
-webkit-column-gap: 20px;

/* to make it stand out from rest of the article  */
padding: 2em;
border: 1px solid #ccc;
}

.twoColumnExample2, .twoColumnExample2 *
{
line-height: 1.5em;
margin: 1.5em 0;
}

.twoColumnExample2:first-letter
{
font-size: 5.2em;
margin-top: 0.1em;
float: left;
padding-right: 0.1em;
color: #CC3333;
}

.twoColumnExample2:first-line
{
font-variant: small-caps;
letter-spacing: 0.1em;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus congue vulputate lacus. Phasellus sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam nisi lectus, lobortis non, dictum non, ultricies et, tellus. Nunc dapibus tristique ligula.Donec viverra, ligula in vulputate vehicula, erat enim viverra risus, et porttitor sapien massa vitae tortor. Praesent nisl. Integer iaculis sem eget turpis. Duis pede mauris, vulputate in, aliquet vitae, aliquam non, orci.Morbi vitae est sed urna convallis congue.

Aenean velit

Mauris quis lorem. Donec diam sapien, malesuada eget, fringilla non, placerat interdum, ipsum. Sed ullamcorper neque vel sapien. Maecenas adipiscing enim sed nisl. Mauris vestibulum congue elit. Nunc faucibus.

The Future

I am looking forward to when the column CSS properties are widely supported. For a long time multiple column layouts have only been possible through the misuse of tables or through lines and lines of styling. I.e. the “Perfect 3 Column Liquid Layout“.

Of course this future is quite far away; IE8 Beta 1 was recently released which I suspect won’t render some of the CSS2 features correctly (or at all) and CSS3 support is still a long way off. Imagine that? The net being held back by rubbish Microsoft browsers. hmm…

Although it must be said that the print industry has had hundreds of years to get to where it is now, I really hope that Microsofts browsers don’t hold the web back that long.

This entry was posted on Monday, March 17th, 2008 at 8:59 pm and is filed under css. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply