CSS3 and Multi-Column Layouts Are Coming

By Marisa Peacock | Published Jul 9, 2009

The last time we covered the W3C's efforts to address CSS 3 it was in relation to typography and web fonts. Now, the same Cascading Style Sheets (CSS) Working Group has published a Last Call Working Draft of CSS3 module: Multi-column layout.

CSS3 With Mobile Focus

Addressing issues of multi-column layout (deemed a design trend to watch in 2009) in CSS, it builds on the CSS3 Box model module and adds functionality to flow the content of an element into multiple columns. Essentially, multi-column layouts provide a degree of flexibility allowing content to flow from one column to another.

As well, it allows developers to remove presentation tables from layouts so that text can be more easily read and accessed from mobile devices. The W3C is also focused on the mobile platform as well, as demonstrated by this past May's Mobile Web Best Practices Working Group, which focused on their Mobile Web Initiative for developing best practices of delivery and accessibility of mobile web applications.

Why Multi-Column Layouts Are Important

A multi-column element is an element whose ‘column-width’ or ‘column-count’ property is not ‘auto’ and therefore acts as a container for multi-column layout.

Traditionally, content of an element has flowed into the content box of the corresponding element. Multi-column layout introduces a new type of container between the content box and the content, called the column box, which allows the content of a multi-column element to flow into its column boxes.

Though it may seem like a non-issue, this is precisely the kind of thing W3C loves to investigate. For it's these type of web defaults that can cause unnecessary strife for users. The CSS working group's latest working draft addresses the nuts and bolts of mutli-column CSS — from width to column gaps and breaks, all elements are explored for consideration.

Their ultimate goal is that these guidelines for CSS3 for multi-column layout will become the standard for designers, developers and all web managers. Readers have until October 1 to comment on the working draft.