textwrap

running words around
design education and visual communication
authored by chris m hughes

Multi-Column Layouts in CSS3

Saturday, 14 November 2009

We are definitely entering a new era of interactive design.

When it finally gets launched, Wired Magazine's new Adobe Air powered PDF publication will take the convergence of print and web design to new levels. But the application itself is designed to run offline, on an iPad or a tablet.

Online, things are just as exciting. Web designs have started to appear which are attempting to emulate print layouts by displaying text content using magazine and newspaper columns.

Setting text in columns like this can improve readability by reducing scrolling and chopping sentences into shorter chunks, but reading becomes tedious if the articles are more than a few hundred words long. Layouts can end up looking confusing and busy.

The good news is that implementing multi-column text can work brilliantly in certain designs, and is very easy to implement in CSS3. The technique is supported by Safari, Firefox and Chrome, and the W3C specification has all sorts of customisable options for vertical rules, line breaks and so on.

With multi-column css, designers don't need to use floated divs to produce the columns, so the content isn't placed into separate divs to create the effect - the text simply flows in columns across a single containing area, exactly the way it does in InDesign. The css creates the columns and they can be edited quickly to alter the layout.

In the example here, I've created a div called #multi, which will split a paragraph of placeholder text into two equally-sized columns, based on the width of the div they have to occupy.

The CSS
The CSS is simple for this technique, but much like css3 rounded corners, we need to accommodate Mozilla and the webkit browsers separately.

The column-count property divides a div into columns of equal width. The amount of columns is specified by the value you give the count. To control the width of the column spacing, we use the column-gap property. This is the equivalent of the guttering you might set using InDesign to lay out a print document.

#multi {
width:480px;
-moz-column-count: 2; /* for Mozilla*/
-moz-column-gap: 20px;
-webkit-column-count: 2; /* for Safari and Chrome*/
-webkit-column-gap: 20px;
}


The HTML
I've just pasted some lorem ipsum into the div, making sure there are no extra line breaks or spaces in your copy. And here is how it displays -

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.


Looks great, but here is what is really cool about the technique. Let's say I want to split the paragraph up into 4 columns, not 2.

All I have to do is adjust the css like this -

#multi{
-moz-column-count: 4;
-moz-column-gap: 20px;
-webkit-column-count: 4;
-webkit-column-gap: 20px;
}

and the result is -

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.


Wow. And that's it. Try laying text out like this using divs and floats and it will take forever and probably never look right.

And for anyone viewing this post in Internet Explorer, you won't see it because multi-columns aren't supported using css3. There are a few javascript solutions however, like this one, which are simple to implement and work across the more stable IE versions.

More:
W3c Multi-Column specification
Thinking For a Living