Cool! I wasn't aware of this CSS3 feature, but seeing this kind of stuff makes it up, I can't wait until Gecko gets some CSS lovin' from the devs! ;-)

I've ogling this module since it was first proposed — the power it offers Web designers is incredible. Finally, we will have (in at least one browser) the ability to truly control columnar text on the Web without the use of JavaScript.

Yeah and be unable to use it unless we want to lockout or hack things to hell for IE at least?

Still another feather in the firefox cap. :)

> Yeah and be unable to use it unless we want to lockout or hack things to hell for IE at least?

No, you would just degrade to a non-columnar layout for IE.

Exactly, Matthew. Multi-column allows one DIV to turn into three, four, or 10. With a clever enough design, browsers not supporting it will display to a single column.

Excellent work by Mr. O'Callahan (though I'd rather have inline-block).

I'm sure that you folks are right, i never looked into how it works. (I couldn't get the link to load and i'm lazy :D) Thanks for that!

However i can't imagine many reasons i'd want to use multiple columns and yet be happy that the majority of the web sees only one.

Sorry to double post, just wanted to apologise for sounding snippy or argumentative. I'm not unhappy that it's going to be supported. I'm happy, i just see limited use for it.

Unless I'm wrong, a big advantage of this system will be to put a links bar in one column and the content in another. Currently the best way I know to pull this off is to flow the content with some padding on the side and float the nav bar over the padding. It's hackish and has some anyoing side effects.

If you want to do sidebars, floats are still what you want with CSS3. If you want to indent your main content so it stays indented past the end of the float, use the new "float-displace: block" CSS property on the block containing the main content. The diagrams in the draft show how it should be laid out.

James:

you can just do this in the CSS:

div#main { margin-left: 200px; }
div#side { width: 200px; float: left; }

and in the HTML:

side area
main area

the side div floats happily in the main div's margin space.

sdkaneda: With the float-displace solution, you don't need to explicitly state the width of the sidebar. This way the sidebar will scale correctly with the size of the content inside.

Setting the sidebar width in "em"s gives a pretty good approximation, but is inexact (you don't know what fonts are available on the client system, or what they have their font size set to). Setting the width using a percentage unit is also not correct, since that sets the sidebar width based on the window width rather than the sidebar content width.

The new property makes it possible to specify a class of layouts that were previously only possible through the use of tables (large table with two columns, first column without width set, second column with width set to 100%).

Will this allow stuff like iht.com and my site (http://new.nique.net/issues/2004-04-16/news/)? or am I misunderstanding what this will allow?

(click the icon next to the page count if new.nique.net it isn't columns)

grayrest: yes, that's exactly what multi-columns will allow.

The only thing it lacks is the click the last column to advance the page. The spec doesn't allow that (and in fact encourages the vertical, not horizontal dimensions of the containing element to change).