Multicolumn Layouts in CSS

Gecko support for CSS3 multicolumn layouts looks interesting... I know next to nothing about CSS3 in Mozilla, but this is something that I have wanted to use on a number of occasions.

Have been thinking recently about implementing something similar using Javascript, but the necessary CSS I have been experimenting with so far is quite hacky.

The basic idea is to use a standard flow of content tags in a single div, using visibility:hidden set to hide the content from view, which has the effect of retaining offset values on the content elements to base the height and width calculations. The javascript would read the content into a collection, and append a new HTML display structure with the columns structured in separate divs, controllable via custom CSS classes.

To create a column layout, you would just need to know the number of columns, and the width and the height of each column, and the script would thus be able to re-calculate the flow of content. It would be nice to control as much of the layout as possible through CSS, but I'm still a little uncertain about what the overlap between style objects and computed styles should be.

The code for placing arbitrary paragraph breaks would be interesting. May require some kind of string parser or backtracking regex. I'm tempted to bend in the direction of treating the document as template strings, rather than trying to rely on verbose DOM maniuplations, although there may be something in there that would be helpful. The best direction I've seen thus far is the 13th Column Script.

I'm not overly happy with my early attempts at this, so finding out that CSS3 offers direct support for multicolumn layouts is pretty cool. The benefit of a Javascript solution of course, is compatibility with Internet Explorer. You win some, you lose some.