Introducing the CSS3 Multi-Column Module

by Cédric Savarese

53 Reader Comments

Back to the Article
  1. I would really, really like both a column-height property, and not least a column-max-height property, last one making it possible to set the max-height of the columns (surprise!). If the content then overflows the columns, there should be created ‘more columns’ vertically.
    That would actually be useful for something, quite contrary to what you achieve in Firefox 1.5 (RC1), when setting the height property on the ‘column-element’, giving you more columns horizontally (which is an understandable behaviour though, as it’s height, not column-height).

    Copy & paste the code below to embed this comment.
  2. I just thought it was ironic how the following line was placed into the article, yet the line after it had 14 words:

    Between 8 and 12 words seems to be the

    On, a more serious note, great insight, but will we really be able to use CSS3 for some time?

     

    Copy & paste the code below to embed this comment.
  3. I think this is a great way to make large amounts of text more readable (subject to the columns not being longer than the length of the viewport, of course). I’m definitely considering using it on a new website I’m just starting work on.

    One quirk I’ve noticed though is that the text in the first column has some whitespace above it, whereas the others do not which throws off the alignment of the text lines. This is readily visible in Test Case 5.

    Any way of sorting this out?

    Copy & paste the code below to embed this comment.
  4. My first column ends in the middle of bullet number 4 and is continued in the second column; it is renumbered as bullet 3.  And again, the second column ends in the middle of bullet number 6, yet is reassigned bullet number 3 in the third column.

    Quite unexpected, indeed.

    Copy & paste the code below to embed this comment.
  5. I publish my blog through blogger. I added the articall class to my linked css stylesheet. I then added the script below the link to my stylesheet. Then added a <div class=“article”> div around my post. Still no worky. www.ksauce.com Let me know if you know why. kurt.potts@gmail.com

    Copy & paste the code below to embed this comment.
  6. I remember wishing that CSS could do something just like this.  I think if the major browsers will impelement this in a reliable fashion, then it will increase the rate at which designers drop their nested tables in favor of semantic markup.

    Copy & paste the code below to embed this comment.
  7. It is my opinion that until all browsers support CSS3 web development will have to stick to calculating split points via scripts, either server side (e.g php) or client side (e.g. javascript solutions as shown).

    With the article script and indeed with the CSS3, what is really required is the abilty to set any element as no_break_within.

    Using the javascript supplied you can fool the javascript with
    ‘<span><ul class=“adlist”><li><img >text</li></ul></span>’
    to keep the text together. Unfortunately the side effect is that the last column tends to be the longest (at a guess the split point is set to the beginning of one of the elements).

    What is really required is if classname=“nobreak” or somesuch the split point becomes the end of the element.

    Another niggle which is required to be truly successful is orphan and widow controls although I fully realise the complexity this could cause.

    Thanks again for a useful article.

    Copy & paste the code below to embed this comment.
  8. http://www.buero-newyork.com

    Copy & paste the code below to embed this comment.
  9. First, 8 to 12 words per line is NOT the “ideal” or even magical number. It actually depends on a few variables – the entire length of the column, the point size of the type, etc. There is a technical and mathematical way of determining proper word count on a line…but I digress.

    My point here is that this feature is potentially very valuable. It must be used in moderation though. Usability concerns arrise as well. One major difference between print and web, is that a web browser scrolls. BUT I have hopes for this and hope it will become more of a standard in the future. Even if a bunch of junk comes from it, it merely helps sort out good design from bad… though I should be careful with a wish like that, people start to forget good design :( Anyway, nice article and let’s keep our fingers crossed.

    Copy & paste the code below to embed this comment.
  10. I have an unordered list I needed to dynamically break into 2 columns. This solution works almost beautifully. While it does split the unordered list into two columns it breaks the href tag on the first entry of the 2nd column leaving that particular item unlinked.

    Copy & paste the code below to embed this comment.
  11. Fixed the issue. Line 26 contains the variable “splitableTags” – I removed ‘A’ from the list of HTML tags and all functions as it should now.

    Copy & paste the code below to embed this comment.
  12. I’ve implemented the basic CSS3 multi-column functionality in a “template for the Serendipity blog engine (Serendipity themes)”:http://themes.daves.me.uk. It’s imaginatively called ‘Multi-column’ and of course it only works currently in Firefox. I could implement a javascript solution for other browsers until they deign to support multiple columns. As all the content is generated dynamically, I’ve only used column-gap and column-count but it seems to work well

    Copy & paste the code below to embed this comment.
  13. In the example test case 6 on this site you can see that the list item which goes to the top of the next column, does not work as a hyperlink.
    I am trying to use the script to do a very similar thing, and it does not work on my site either.
    I hope you can fix this, since I would like to use the script very much.

    Best regards,

    Linda

    Copy & paste the code below to embed this comment.