CSS: multi-column (newspaper) Layout

Xah Lee, 2005-11-30, …, 2012-04-21

This page shows you how to use CSS3 for multiple column layout, as in newspaper.

One way is to hard-code your paragraphs into HTML Table, where each <td> cell is a column. It is a pain because when you add or delete paragraphs, you have to manually shift the text among your <td> tags. There are some JavaScript solution for auto column flow but it is very complex.

A proposed solution is in CSS3 “Multi-column layout”. However, this is not widely supported. Firefox and Safari have experimental support.

CSS3 Multi-column Layout

Here's the basic multi-column CSS code:

div.xyz {column-count: 3}

Test here: CSS Multi-Columns Test Page.

This is supported by Opera only, as of 2012-04-21.

Safari, Chrome, Firefox, Experimental Support

• For Firefox, use -moz-column-count.
• For Google Chrome, Safari, use -webkit-column-count.

Test page: CSS Multi-Columns Test Page 2.

Reference

http://www.w3.org/TR/css3-multicol/