Creating a column on the Web is a totally different story. It’s quite difficult. In fact, not too long ago you may need to divide the content manually into some divs and float it to the right or left, then specify the width, padding, margin, borders and so on.
But, things are now much simplified with the CSS3 Multi Column Module. As the name clearly implies, this module allows us to divide content into the columned layout we see in newspapers or magazines.

Browser Support

Multiple columns are currently supported in all browsers – Firefox 2+, Chrome 4+, Safari 3.1+ and Opera 11.1 – except, as predicted, Internet Explorer, but the next version, IE10, seems to have started providing support for this Module.
For the rest of the browsers, in order for it to work, Firefox still needs the -moz- prefix, while Chrome and Safari need the -webkit- prefix. Opera doesn’t require any prefixes, so we can just using the official properties.

Create Multiple Column

Before we create the columns, we have prepared some text paragraphs for the demonstration, wrapped inside the HTML5<article> tag, as follow;
    1. <article>
    2.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
    3.     rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
    4.     Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
    5.     amet tincidunt orci placerat in. Integer vitae consequat augue.

    7.     //and so on
    8. </article>
…and specify the width for 600px from the style sheet, that’s it.
Now, let’s start creating the columns.
In the example below, we will divide the content into two columns with the column-count property. This property will tell the browser to render the content into columns by the specified number and let the browser decide the proper width for each column.

Column Gap

Column Gap define the spaces that separate each column. The gap value can be stated in em or px, but as stated in the spec the value cannot be negative.
    1. article {
    2.     -webkit-column-gap: 30px;
    3.     -moz-column-gap: 30px;
    4.     column-gap: 30px;
    5. }

Column Rule

Should you want to add borders between the column, you can use the column-rule property, which works very similar to the border property. So, let’s say, if we want to put a dotted border between the column, we can write;
    1. article {
    2.     -moz-column-rule: 1px dotted #ccc;
    3.     -webkit-column-rule: 1px dotted #ccc;
    4.     column-rule: 1px dotted #ccc;
    5. }

Column Span

This property works quite similar to the colspan in table tag. The common implementation of this property is to span the content’s headline across all columns. Here is an example.
    1. article h1 {
    2.     -webkit-column-span: all;
    3.     column-span:all;
    4. }
In the example above we defined the h1 to span across all columns, and if the column span is specified, 1 will be taken as the default. Unfortunately this property, at the time of this writing, only works in Opera and Chrome.

Final Thoughts

That’s all for now, we have come through all the essential stuff to create multiple columns with CSS3, and as we have mentioned in the beginning, this module works very well in modern browsers but it doesn’t work yet in Internet Explorer, but should you insist to apply Multiple Column in unsupported browsers, you can use this JavaScript library to mimic this Module functionality.
Ultimately, we hope that you now have a fairly good understanding on how to create columns with CSS3, and if you have time for experiments, feel free to share your methods and results in the comment box below. Thank you for reading this post and have fun.