2010-10-13

CSS multi-column Layout?

Perm url with updates: http://xahlee.org/js/css_multi-column_layout.html

CSS multi-column Layout?

Xah Recommends:
Kindle
Amazon Kindle. Read books under the sun. Review

Xah Lee, 2005-11, 2010-10-13

Sometimes you want your text to flow into multiple columns, as in newspaper.

One way is to hard-code your paragraphs into HTML Table, where each “<td>” cell is a columns. 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”. See http://www.w3.org/TR/css3-multicol/. However, this is not widely supported as of 2010-10. FireFox and Safari have experimental support, but with a different css attribute.

Multi-column Basics

Here's the basic code:

div.columtext {column-count: 2}
  • For FireFox, use “-moz-column-count”.
  • For Safari, use “-webkit-column-count”.

Test Page

Multi-Columns Test Page