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
Tags: CSS Multi-column