HTML Hot Tip: Creating Multicolumn Layouts Using <multicol>

With the advent of the <multicol> tag in Netscape 3.0, you can now create multicolumn layouts for your HTML pages with a single tag. This only works in Netscape 3.0 and higher; other browsers will simply render your text as a single, regular flow within your document.

Basic Multicolulmn Layout

To create a multicolumn flow, put the <multicol> tag around the desired text:

     <multicol cols=2>
     This text will be displayed in two columns,
     divided equally across the current flow.
     I'll just add more text to make the flow obvious.
     This text will be displayed in two columns,
     divided equally across the current flow.
     I'll just add more text to make the flow obvious.
     This text will be displayed in two columns,
     divided equally across the current flow.
     I'll just add more text to make the flow obvious.
     This text will be displayed in two columns,
     divided equally across the current flow.
     I'll just add more text to make the flow obvious.
     </multicol>

If you are running Netscape 3.0, you should see a two-column layout: This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. Notice that the multicolumn flow is preceded and followed by a paragraph break, and that Netscape tries to balance the columns to make them the same length.

To change the number of columns, use a different value with the cols attribute. Here is the same text as a three column layout (<multicol cols=3>): This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. You can use any number of columns, but more than three gets pretty hard to read. Here are five columns (<multicol cols=5>): This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious.

Controlling Column Width

Normally, Netscape chooses a column width so that all the columns, plus the space between them, fills the current textflow. You can change the column width by adding the width attribute to the <multicol> tag. The value of this attribute is either a number of pixels or a percentage of the browser window; the value defines the total space occupied by the columns, not the width of a single column. Ignore Netscape documentation that claims that the width attribute sets the width of a single column.

For example, to create two columns that together fill 25 percent of the window, use <multicol cols=2 width="25%">: This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. Not too attractive. But a pair of columns filling two-thirds of the page looks nice:

This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious.
(Getting that centered was a major hack; see below for details.)

Changing the Gutter Size

The space between the columns is called the gutter. The default gutter is 10 pixels; you can change this with the gutter attribute. Like the width attribute, you can set the gutter to an absolute number of pixels or the a percentage of the window width.

Here are two columns, with 100 pixels between them, created with <multicol cols=2 gutter=100>: This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. This text will be displayed in two columns, divided equally across the current flow. I'll just add more text to make the flow obvious. You might want to experiment with differing gutter widths to see what happens to your columns.

Bugs and Caveats

To be honest, <multicol> has a lot of bugs:

It is ignored inside a centered block of text
It doesn't always work right inside table cells
Setting the gutter to a percentage doesn't work
It always has the document background color, even inside colored table cells

Still, it is really useful for creating simple, multicolumn flows. It certainly beats the old hack of splitting your text among multiple table cells.

I promised to show how to center those two columns, above. Well, simply putting the <multicol> tag in a <center> tag doesn't work. Encapsulating the flow inside a single-cell table inside a center block doesn't work either, although I was hoping that isolating the text in a table cell would fix things up.

(This is a good general tip, by the way. Sticking stuff in a single-cell table makes it a single entity for layout purposes. This is how I built the layout of my top-level page.)

I finally hacked the centering by creating a table with one row of three cells. The left and right cells are empty; the middle one has the text inside the <multicol> tag. You can control the horizontal placement of the columns by adjusting the widths of the outer columns. To center the columns as they occupy two-thirds of the page, set the outer columns to be 16 percent (one-half of one-third) each. The final HTML looks like this:

    <table border=0 width="100%">
    <tr>
    <td width="16%"></td>
    <td width="66%">
    <multicol cols=2>
    The text goes here
    </multicol>
    </td>
    <td width="16%"></td>
    </tr>
    </table>