home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeHTML & XHTML: The Definitive GuideSearch this book

14.2. Multicolumn Layout

Multicolumn text formatting is one of the most common features of desktop publishing. In addition to creating attractive pages in a variety of formats, multiple columns let you present your text using shorter, easier-to-read lines. HTML page designers have longed for the ability to easily create multiple text columns in a single page, but have been forced to use various tricks, such as multicolumn tables (see Chapter 17, "Tips, Tricks, and Hacks").

Netscape has neatly solved this problem with the unique <multicol> tag. While fancy unbalanced columns and straddling are not possible with this tag, as they are with tables, conventionally balanced text columns are easy to create with <multicol>. And while this capability is available only with Netscape, the <multicol> tag degrades nicely in other browsers.

14.2.1. The <multicol> Tag

The <multicol> tag creates multiple columns of text and lets you control the size and number of columns.



Format text with multiple columns







End tag:

</multicol>; always used



Used in:


The <multicol> tag can contain any other HTML content, much like the <div> tag. All of the content within the <multicol> tag is displayed just like conventional content, except that Netscape places the contents into multiple columns instead of just one.

The <multicol> tag creates a break in the text flow and inserts a blank line before rendering its content into multiple columns. After the tag, another blank line is added and the text flow resumes using the previous layout and formatting.

Netscape automatically balances the columns, making each approximately the same length. Where possible, the browser moves text between columns to accomplish the balancing. In some cases, the columns cannot be perfectly balanced because of embedded images, tables, or other large elements.

You can nest <multicol> tags, embedding one set of columns within another set of columns. While infinite nesting is supported, more than two levels of nesting is generally impractical and results in unattractive text flows. The cols attribute

The cols attribute is required by the <multicol> tag to define the number of columns. If omitted, Netscape creates just one column, as if the <multicol> tag isn't there at all. You may create any number of columns, but in practice, more than three or four columns make text unreadable on most displays.

The following example creates a three-column layout:

<h1 align=right>Temperature Effects</h1>
<multicol cols=3>
The effects of cooler weather on the kumquat's ripening process 
vary based upon the temperature.  Temperatures above 28&deg; 
sweeten the fruit, while four or more hours below 28&deg; will
damage the tree.  The savvy quat farmer will carefully monitor 
the temperature, especially in the predawn hours when the 
mercury dips to its lowest point.  Smudge pots and grove heaters
may be required to keep the trees warm; many growers will spray
the trees with water to create an insulating layer of ice over
the fruit and leaves.
If a disastrous frost is predicted, below 20&deg;, the only 
recourse may be to harvest the fruit early to save it from an
assured disaster.  Kumquats may subsequently be ripened using
any of the popular methane and cyanoacrylate injection systems
used for other citrus fruits.  Used correctly, these systems will 
produce fruit whose taste is indistinguishable from tree-ripened

The results are shown in Figure 14-4.

Figure 14-4

Figure 14-4. A three-column <multicol> document segment

You can see in Figure 14-4 how Netscape has balanced the columns to approximately equal lengths. You also can see how several lines within the columns appear shorter, since longer words were wrapped to the next line of text. These overly ragged right margins within the columns are unavoidable and serve to emphasize that you shouldn't create more than four or five columns in a flow. Our example is still barely readable if displayed as five columns; it breaks down completely and even induces rendering errors if cols is set to 7, as shown in Figure 14-5.

Figure 14-5

Figure 14-5. Too many columns create unreadable pages

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.