Of the upcoming CSS3 modules that are coming into common use: selectors, borders, text etc, the multi-column layout module interests me the most. I've always been a fan of newspaper style layouts and that was one of the key looks I was going for when re-designing this site. The big problem is that the module just isn't ready yet.
- The module is currently supported by Safari 4, Chrome 3 and Firefox 3.5
- Opera 10.5 has support coming but is not implemented yet. IE has no support for the feature, which is currently not planned for IE9 (at least not mentioned)
- The spec has a number of properties that are not implemented by any browser (column breaks)
The basics of my issue
I've got a containing
<div> with [-moz|-webkit]column-count set to 3, ample gap for the lists and no width specified to let the browser lay out the content as it sees fit. There are three
<h5> elements, each followed by a
<ul> element in the
<div>. What I expect the browser to do is identify the
<h5> elements at column headings and start a new column with this element. Instead, it ignores my semantics and tries to push out equal height columns.
Why is this so annoying
Simply because column-break doesn't work. What I do is put
[-moz|-webkit\]column-break:after on the
<ul> elements but the browser continues to insist on its own break points.
Get it right
It appears that the candidate recommendation spec (17th December 2009) has resolved some of these issues, but it will take a while for them to get in to builds and even longer before they become mainstream. For now, keep using floated