Since the beginning of web design, there has always been a need to make multi-columned text pages. Sadly HTML and CSS 1+2 has rather weak support for this kind of wrapping techniques. Many workarounds have been created for this using JavaScript and server side pages. But the draft specification of “CSS3 module: Multi-column layout” promises to solve this “column problem” by adding a set of CSS properties.

Mozilla Firefox 1.5 beta adds preliminary support for these properties, so that developer can begin playing with it, not however that the reason the properties begin with “-moz-” is that the CSS3 Multi-column specification is still a draft, so therefore they should not be used for real web design yet, unless it can make a clean fallback when meeting non-mozilla 1.5+ clients.

I have created CSS3: Multi-column module demo for Firefox 1.5 beta – which shows some of the wonders of the new multi-column features, as well a some other CSS properties to create a nice flowing page with highly dynamic columns, and pretty stable compared to many of the older methods, but you need to use Mozilla Firefox 1.5 beta – which I would only recommend to Web Developers.

You can also check some screenshots of the demo, showing it’s ability to create as many columns as it can, while maintaining nice readability thru limited line-width.

Don’t believe the rumours, check the demo yourself here:

CSS3: Multi-column module demo for Firefox 1.5 beta

See more code samples at Mozilla Developer: CSS3 Columns.

A List Apart: Articles: Introducing the CSS3 Multi-Column Module