Subscribe by Email

Multiple Columns

What is strikingly odd about web design is just how difficult it can be to make a multiple column website. For the last 15 years we’ve been designing websites like newspapers and magazines, consisting of many columns, and it’s been working out pretty well. The tools we use, however, haven’t changed that much since then as regards layout. For example, in CSS we have to use the float property which can be quite bothersome and even worse, we may even resort to an old status quo: using tables.

That’s why the CSS3 Multi Column Module is perhaps one of the most interesting and exciting things that has happened to CSS in a long time. It’s not a gimmick or design trick like box-shadow or animation. It’s a real, tangible device which we can use to make designing websites easier. For a long time it was an unreachable goal. Something coming in the future, but not right now. That is no longer the case. All the main browsers support at least a few of the multi column layout module, and at least, enough to make a functioning website with it. Check out the demo to see it in action

Support

Webkit

Gecko

Trident

Presto

columns

Experimental

Experimental

Experimental

Supported (2.8)

column-count

Incorrect

column-width

Supported (2.8)

column-gap

column-rule

column-span

Not Supported

column-fill

Not Supported

break-before

Experimental

Not Supported

break-after

break-inside

Not Supported

Opera (Presto) is pushing ahead with support of this module. The other browser vendors have also implemented experimental versions of this perhaps incase the specification changes.

What it does

Columns are a way of organizing content. The CSS specification says that this will be simplified as screen size becomes smaller, by default. This is apparent in the implementations in many browsers. As a quick beginners example, lets say we have this syntax:

So what we’re saying here is that the div will be separated into columns that will be 10em wide. We could use pixels too! Then we say the gap between the columns. Then we put a rule between the columns which will appear in the middle of the 2em. In other words, it goes 1em, border, 1em. Here are some images showing how screen size affects number of columns:

Wide Screen

Normal Screen

Small Screen

This is all automatic! So instantly, I’m sure you can see the applications of this for mobile and screen size orientation. Whereas before we used a lot of media tags to alter websites according to size, we could see more use of this when it reaches full implementation in browsers.

So how exactly does all of this work?

A Rundown of the Properties

columns

A short syntax for the column-count and column-width

columns: <column-width> <column-count>

column-count

The number of columns! The implementation of this is strange. In Opera column-count seems incompatible with column-width. Column-width seems to override column-count whereas the specification says that if both are defined, column-count should define the maximum number of columns. Webkit and Gecko have the correct implementation of these features.

column-count: 5; /* For 5 columns */

column-width

The optimal column width. If the window is too small, the columns may be smaller. Conversely, if the window is too wide it might be larger!

column-width: 15em;

column-gap

The gap between columns.

column-gap: 2em;

column-rule

The rule (or line) between columns. This works the same as a border. For example, a 2px solid black border would be made like this:

In the middle of the content. You want it to go through all columns. Well you’d just do this!

h2 {
column-span: all;
background: #eee;
}

Which will give you this:

column-fill

The column-fill property is perhaps a bit ambiguous as compared to the other properties. It has two properties, ‘balance’ or ‘auto’.

In continuous media, this property will only be consulted if the length of columns has been constrained. Otherwise, columns will automatically be balanced.
In continous media, this property does not have any effect in overflow columns (see below).
In paged media, this property will only have effect on the last page the multicol element appears on.

break-before/break-after/break-inside

This is for paged media. It defines when the columns should be broken, i.e. when a new column should start. These are pretty useless at the moment because of lack of support. These are applied to other elements, like an h2 or img. For example if we did this:

h2 {
background: #eee;
break-before: column;
}

It would force a new column to start before the h2 element. I think from there you can extrapolate how the other elements work. Here’s a summary of the various properties you can apply:

Wouldn’t it be nice if there was an established authority on “certified” browsers, where each browser developer met specific criteria to become certified using common rules rather than browser specific rules? The authority providing certification would be much like WC3 and provided a grading structure for which consumers could choose whats best for them, much like they do now, but with more transparency as to what they a really getting with an OS “default” browser. Developers would submit new rules/code/idea submissions through a certification panel to be voted upon by established web community verterans and then absorbed into the framework of the certification process. It seems to me, IE has always been the underdog causing so much development pain throughout the years always trying to find ways around simple problems other browsers breeze through, so why are so many people still using it? Because they don’t know better. No one is telling them that. I’d even support the idea of a light and simple “certification” plugin that tells people when they visit my site if their browser sucks and what they are missing out on.

Thank you for any other wonderful article. Where else may just anybody get that type of information in such a perfect way of writing? I’ve a presentation next week, and I am on the look for such information.