Create Multiple Columns Layout (Magazine-alike) With CSS3

In general, people will lose track when reading extremely long content. That is why, in print media like magazines and newspapers, the content is divided into multiple columns for easy reading.

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.

Source: When can I use CSS3 Multiple column layout?

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;

 <article>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,
 rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.
 Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit
 amet tincidunt orci placerat in. Integer vitae consequat augue.
 
 //and so on
 </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.

 article {
 -webkit-column-count:2;
 -moz-column-count:2;
 column-count:2;
 }
 

Apart from being defined by the count, columns can be created by specifying the width using the column-width property and leaving the browser to decide how many columns should be generated in place.

In this example, we specify the column width for 150px, which resulted in the content to be divided into three columns.

 article {
 -moz-column-width: 150px;
 -webkit-column-width: 150px; 
 column-width: 150px;
 }
 

As stated in the spec. the actual width of the column may be wider or narrower than the specified column width depending on available space. Also, if the width value is not explicitly specified, the “auto” will be taken as the default, which could also means “no 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. In the example below we specify the gap for 30px, so the spaces between the columns look a little wider.

 article { 
 -webkit-column-gap: 30px;
 -moz-column-gap: 30px;
 column-gap: 30px;
 }
 

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;

 article {
 -moz-column-rule: 1px dotted #ccc;
 -webkit-column-rule: 1px dotted #ccc;
 column-rule: 1px dotted #ccc;
 }
 

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.

 article h1 {
 -webkit-column-span: all;
 column-span:all;
 }
 

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 Words

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.

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.

• Demo
• Download Source