This is part 3 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed border radius. In this post I’ll be talking about multi-column layouts.

Newspaper-style columns are easier to read than long lines of text. In CSS3, the browser interprets the properties and creates the columns, flowing the text from one column to the next.

In the case above, we use this code:

#columns {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
color: #fff;
}

Webkit targets Safari and moz targets Mozilla browsers.

There are three things we can define when using this style. The number of columns (column-count), the width of each column (column-width) and the gap between columns (column-gap). If you don’t declare a column-count, the browser will create as many columns as are needed to fit in the available width.

If you prefer to use a vertical separator, declare a column-rule. This is pretty much a border property.

div {
column-rule: 1px solid #00000;
}

Browser support: Multi-column layouts are supported by Safari 3 and 4 and Firefox 1.5+. If the browser doesn’t support this, it will render the text as normal text.

In my next post I will discuss the usage of box shadows and how to add a drop shadow to a div.