Warping it up!

Fini Alring's Glossy Tech Zine

CSS3: Multi-column Demo for Firefox

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.

CSS3 Multi-column demo 0.2b 001 CSS3 Multi-column demo 0.2b 002
CSS3 Multi-column demo 0.2b 003 CSS3 Multi-column demo 0.2b 004 CSS3 Multi-column demo 0.3b 001

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

Tags: , , , , , , , , , , ,

2 Responses to “CSS3: Multi-column Demo for Firefox”

  1. David Naylor Says:

    Man, that’s wicked! Can’t wait till the day we can use that stuff :-) Hopefully I’ll still be alive.

  2. Luigi Onori Says:

    Hi Fini, your demo is challenging, and reflects the big potential CSS3 columns have for web developers. Anyway I am a bit discomforted about future support of these standards by some MainStream browsers: we’ll be lucky if upcoming ie7 will have a decent and bug-free CSS2 support.

    It’s frustrating: I loved Mozilla since its early days, but I must admit that, among my clients, there were none using Firefox on their own. They eventually made the switch only after my insistences.

    Hoping for a more standard-compliant world.

Leave a Reply