CSS tips and tricks

CSS3 offers a new way to arrange text content using the Multi-column CSS3 module. This CSS3 feature will help you fit your text into columns without extra markup like div floats or extra table markup.

Short browser history and support

The draft was published a decade ago – in 2001, but only in April 2005, with the release of the Firefox 1.5 beta (based on Gecko 1.8), parts of the CSS3 Multi-Column module were supported.

Multi-column module is currently supported only in Mozilla and Webkit browsers (Safari and Chrome), this means that there’s no support for browsers like IE and Opera. But that should be just OK as long we are aware and understand the progressive enhancement.

W3C says that:

…style sheets can declare that the content of an element is to be laid out in multiple columns

OK, so how to use it?

As you read above, being supported only by Mozilla and Webkit-based browsers, means that vendor prefixes like -moz- and -webkit- must be used.

The CSS3 module properties

• column-count – the desired number of columns for the element.
• column-width – the width of each column.
• column-gap – the padding between columns.
• column-rule – to specify a border between columns as a divider.

Enough with the theory, let’s see some action!

There are two ways to define columns:

• column-count – how many columns do you need
• column-width – how wide should each column be

Column count

#multi-column1 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  -moz-column-gap: 20px;
  -webkit-column-gap: 20px;
  text-align: justify;
}

Column width

#multi-column2
{
  -moz-column-width: 200px;
  -webkit-column-width: 200px;
  -moz-column-gap: 30px;
  -webkit-column-gap: 30px;
  text-align: justify;
}

Alternatively, you may use the shorthand columns property.

Column rules

Either you choose column-count or column-width to define you columns, to add a border between them append the following CSS declarations:

  -moz-column-rule: 2px solid #9c9c9c;
  -webkit-column-rule: 2px solid #9c9c9c;

Conclusion

These are the most interesting Multi-column CSS3 module properties but if you want to find out more, please visit the W3C specifications for other details.

Below you have an example that shows you how to arrange a paragraph into columns, enjoy the demo and please let me know your thoughts about it!

View Demo

If you enjoyed this article, you might also like:

• CSS filter effects in action
• Interactive menu with CSS3 & jQuery
• CSS Variables Preview
• CSS3 loading animation experiment
• CSS3 signup form