Introduction to CSS3 – Part 5: Multiple Columns

by on 19th May 2008 with 39 Comments

Multiple columns are a major facet of laying out text – newspapers have used them for decades. So important are they that it is amazing that the current way to achieve a multi column layout is one of the most complex techniques for a new designer to grasp.

CSS3 introduces a new module known, appropriately, as multi-column layout. It allows you to specify how many columns text should be split down into and how they should appear. As usual, examples can be found below:

View the live examples page

Multiple columns using CSS3

At present, this feature is available in Firefox and Safari 3. When the module becomes finalised in the CSS3 specification it will be adopted by other browsers and rolled into their updates.

There are four properties which relate to the multiple column layout in CSS3, allowing you to set the number of columns, width, gap between each column and a border between each:

  • column-count
  • column-width
  • column-gap
  • column-rule

At present, a browser specific selector is also needed to identify whether Safari or Firefox should display the selector. The code to be used to create a two column layout with a 1px rule between columns would be:

.multiplecolumns {
-moz-column-width: 130px;;
-webkit-column-width: 130px;
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-moz-column-rule: 1px solid #ddccb5;
-webkit-column-rule: 1px solid #ddccb5;
}

Multiple columns using CSS3

Spanning columns

It could also be the case that you would like an element to span more than one column – a heading, table or image for instance. This is facilitated in the specification through the use of:

h2 {
column-span: all
} 

Numbers can also be used to allow the element to span a certain number of columns. At present this feature isn’t implemented in any major browsers, but should provide much needed additional flexibility when designing around this feature. It would allow you to achieve effects such as:

Multiple column span using CSS3

In the meantime

It could still be a while before this feature is supported on enough systems to allow widespread use. A List Apart published in 2005 a JavaScript implementation of this capability which allows you to use selectors in the same way and offers support in all major browsers. It should also degrade nicely when the feature is widely adopted and the JavaScript is no longer needed. It is a great interim solution if you’re desperate for multiple columns on your site.

In conclusion…

Multiple column layout will save a huge headache for many designers, allowing greater control of how copy is displayed. You can read the full specification for multi-column at the W3 site if you’d like more information about the feature.

The next, and final, article in this series will be looking at the different background features available in CSS3 including using more than one background for an element, and specifying the size of backgrounds. Remember, to see live examples of these features, take a look at our CSS3 example page.

Other posts in the series

Comments & Discussion

39 Comments

Comments & Discussion

39 Comments

  1. Dan Dorman says:

    It appears that “-moz-column-rule” isn’t supported, actually.

  2. Erik Reagan says:

    I really appreciate all of this great information. I do have one question regarding the new CSS3 ‘standards’. Why is there a difference between the way mozilla browsers and webkit browsers are rendering the CSS? If we’re aiming for standards shouldn’t these just be “column-rule” and not “-moz-column-rule” and “-webkit-column-rule”? Perhaps I misunderstand and when CSS3 is done it will have a single rule. Thus far is seems that it’s going against the DRY (don’t repeat yourself) principle.

  3. Erik Reagan says:

    I may have just answered my own question. Using these browser selectors (-moz, -webkit, etc) is a precautionary step currently due to the young age of these properties, am I correct? Once they are released under a complete CSS3 language it will just be something like “column-rule”. Please correct me if I’m wrong. Thanks!

  4. You’re absolutely right Erik. It’s for testing purposes at the moment, and when support is fully implemented they remove the prepended tag.

  5. col says:

    Who is going to do ‘the dirty’ and beat the newspapers by having increasing numbers/width ones to fill the perticular browser width the surfer is using?
    I’ve been looking for a a while for such.

  6. edouard says:

    I’ve just been testing those exemples in googleChrome and the “resizing” property of safari seems to work in chrome as well …

  7. Aamir Afridi says:

    I just love these features than I think about the point when developers will enjoy all these features without thinking of which browsers a user will use, specially ‘IE’

  8. cityville says:

    i was starting to assume i would probably end up being the sole lady that cared about this, at the very least at present i discover i’m not crazy :) i am going to make it a point to take a look at a number additional articles after i get a little caffeine in me, adios for now :)

  9. Rihan says:

    nice..:-)

  10. Raj Aggarwal says:

    You’re absolutely right.

Leave a Comment

Subscribe
Membership
About the Author