Why CSS Multi-Columns aren’t ready for prime 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.

If you enjoyed this post, leaving a comment or subscribe to the RSS feed to have future articles delivered to your feed reader.

Steve Workman

Steve Workman is the Head of Web Engineering at Yell. He is also an organiser for London Web Standards is an occasional public speaker, talking about web performance and web standards

More Posts - Website - Twitter - Google Plus

Tags:

One comment

  1. Miller Medeiros said:

    There are some other bugs / weird behaviors with images, iframes and flash movies (specially on chrome). For now I’m only using it for paragraphs and only if it still looks good even if the browser doesn’t support it.

    cheers.

Leave a response