There is a great article over at A List Apart which discusses multi-column layout support that is being built into CSS3 by the W3C. The proposed new CSS properties are:
- ‘column-count’, to determine the number of columns into which the content of the element will flow.
- ‘column-width’, to describe the optimal width of each column.
- ‘column-gap’, to set the padding between columns.
- ‘column-rule’, to define a border between columns.
I’ve done this sort of thing with traditional CSS (basically hacking it with floats) for longer lists of items that really should be in two columns. Needless to say, it is a royal pain the way in which it has to be done now and requires both math skills and trial and error. Plus you have to think about how you want the page read by a screenreader and how it will be read. These properties would make it easier to get the job done. I’m excited to see that they are proposed.
Even better is the fact that support for these properties may be coming soon to your browser! According to the article, Gecko 1.8 (Mozilla & Co.) and Firefox 1.5 beta (based on Gecko 1.8) supposedly support parts of the CSS3 Multi-Column module. While this may take a while to filter down so that the majority of end-users have a browser with this type of support, it is a step forward. In the meantime, the article also as a demonstration on how to use Javascript to make multi-column layout work with the browsers being most frequently used today.
