Style Sheets: Columns Example with CSS Off
This page examples content that is columned using CSS, presenting the content here with that style sheet information turned OFF.
Welcome!
Glad you could stop by. Why don't you check out the design of this page by viewing the source. There are no tables used to create the effect of columns and the content is easily viewed and read by visitors who have accessibility issues. The drop caps, columns, and paragraph indentations are handled entirely with style sheets. Care must be taken to get the formatting of columns to work with various browsers.
[NOTE: This paragraph has had the border removed. Compare it to the two paragraphs at the bottom of the page in which each have a one pixel (1px) border. Be sure to view the page with Internet Explorer [IE], Netscape Navigator [NN], and Opera [O] to see the result of such a choice. The problem encountered is how NN presents some elements of a page with or without a border.]
To keep your audience's attention, don't make them keep scrolling.
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 but can be simulated to some extent.
There is currently no provision for automatic wrapping into columns so some manual type-fitting is required to adjust the rendering for best presentation. (These provisions are currently being drafted for CSS3.) 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 [NN].
An additional concern is the use of relative widths for the columns. This article uses a percentage (%) for the width for each column, but the CSS author should bear in mind that 'width' is not interpreted the same in all browsers [NN][O]. One browser considers the width is that of the window [NN], another considers that Width=ScreenSize [some NN], a third considers width to be text area with out the padding [O].
When special effects, like this drop cap are used, even more care must be taken so that the rendering remains consistent, even with resizing. Some browsers have been late to support CSS2 [NN]. This is the most accessible method found that allows you to use drop caps while retaining the natural form of the document.
With the use of relative sizing of fonts, resizing has minimal effect on the columns. However, a user can define a style sheet to override your suggestions for presentation, or can precluded the rendering of style sheets through user preferences in their browser of choice. 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.
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. Then it would be necessary to retrofit the document (again), rather than have an ongoing series of articles, with the formatting initially set up in a template. If the decision is made to use the format for that document at all.
To complicate matters even further, if you try to format some parts of your document to 100% of the screen, you may get some strange wrapping, or overextended content, or who knows what [IE]. It should be noted that even using relative sizing for fonts, the columns may break on resizing. If your right most column is not of relatively equal or greater length than the one to its left you may also have overlapping content to contend with [NN].
