This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.

CSS Example: Columns

CSS Columns

If you are expecting a magical solution for providing the same kind of columns which are available in so many word processing or desktop publishing programs, you are looking for the kind of control which is not present with CSS.

There is currently no provision for automatic wrapping into columns, so that some manual typefitting is required, to adjust the rendering for best presentation. If you want your columnar text to be justified, you then have to contend with implementation bugs in at least one popular browser, as well.

On a purely practical level, the CSS format could be easily applied to a static article, such as this one, which would rarely need editing, and then retrofitting (again), rather than an ongoing series of articles, with the formatting initially set up in a template. If the decision is made to use the format, It should be noted that even using relative sizing for fonts, the columns break on re-size.

W hen special effects, like this drop cap are used, even more care must be taken that the rendering remains consistent, even with re-sizing. With the use of relative sizing of fonts, re-sizing has minimal effect on the columns. However, if a user has a user style sheet which overrides your suggestions for presentation , or has precluded the rendering of style sheets, through user preferences in their browser of choice, for example, your job as an author is not complete until you have taken the steps necessary to insure that viewers of your documents still have the best viewing experience possible.

An additional concern is the use of relative widths for the columns. This article uses 30% as the width for each column, but the CSS author should bear in mind that 'width' is not interpreted the same in all browsers. One considers the width is that of the window, and another considers that width = screen size.

So, what's an author to do? We must be careful to consider these differences when we write. ;-)

One of the advertised benefits of CSS is the graceful degradation in browsers which do not support CSS. In the Opera 3x browser, for example, the 'columns' are shown as separate blocks of text which are each separated by a horizontal rule. The HR is hidden for those browsers with CSS enabled, through the use of the 'display: none;' CSS property.

In the original test of CSS columns, the text of each column was shown in a different colour. Besides being very distracting, the colour assigned to each <DIV> only showed when there was no other block level element after the <DIV>. The <DIV>s were re-written, to allow for testing of <SPAN> for adding some colour to the article.

Good luck with CSS Columns, and please share your successes (and failures) with us.

Sue Sims