I originally wrote this for work.  I figured I’d post it on my blog also, guess I’m a re-blogger after all.

Multi-column layout

The CSS3 function for Multi-Column Layout allows the user to creating a design similar to a Newspaper layout. With designs of blogs and websites heading towards a magazine layout type of style I figured this is truly a helpful style to use.

Multi-column Layout Properties

column-count: 3;  this sets the number of columns for which the content will flow.
column-width: 1em; this property sets the width of each column.
column-rule: 1px solid black; this sets a border between the columns.

Code sample:

DIV {
width: 200px;
column-count: 2;
column-width: 100px;
column-gap: 10px
column-rule: 1px solid black;
}

Now if you want to have something span across the columns that can be easily down with the column span property.

Multi-column Span Property:

column-span: all; This allows objects (text/images/etc) to display through multiple columns.