Steve Workman's Blog

Why CSS Multi-Columns aren't ready for prime time

Posted on by Steve Workman About 2 min reading time

CSS Multi-column layout problem 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 facts:

  1. The module is currently supported by Safari 4, Chrome 3 and Firefox 3.5
  2. 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)
  3. The spec has a number of properties that are not implemented by any browser (column breaks)

Ok, so you can work around some of those problems with javascript hacks but that's not the point here. I wanted a pure multi-column layout for the front page of my blog, but instead I've removed the experiement and relegated it to the footer as I just could not get it to work consistently. If you look at this page's footer (or the image at the top of this post) now you can see the problem.

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 <div> elements and javascript.  Maybe then it'll be worth the pain.