How to Make Text Columns in HTML

March 3, 2003 - written by Steven Moseley

In the world of advertising, it has been found that people maintain more interest in pages that have their text divided into columns. Advertising guru David Ogilvy redefined the print ad by adopting the layout and design of articles into his advertisements. This meant that the page would be divided into three columns, using "serif" fonts (see the section on "fonts" for more details), with about 8-10 words per column, and divided into short, full-justified paragraphs.


Since web design is similar in form and function to advertising, I believe that the use of columns for large chunks of text can be a powerful tool in maintaining user attention. It will definitely increase readership, and even for those who don't read it, it will increase the aesthetics, making the web site appear more like printed media than digital media. Along with the use of Drop Caps, Ordered (numbered) Lists, and Font Formatting techniques outlined in some of my other articles, you will be able to make pages that maintain reader focus (more important than appearing bold and shocking)! The longer your reader keeps interest, the more your site sells. Period.

As to my theory of why people like columns in text, I think it could be a few reasons:

  1. Mini-goals. If a large amount of content is divided up into small chunks, the mind is able to tackle each portion at a time, and make mini-accomplishments. On the contrary, a large, monolithic piece of text seems insurmountable. Essentially, by cutting the text up, we're setting small goals for our readers, a tool often used in psychology.

  2. Ease on the eyes. When text is spread out across a large width, people get lost and re-read large portions of text, get frustrated, and eventually quit trying. In smaller widths, it's much easier to maintain focus, because the eye can maintain an overview of the entire line without moving left to right.

  3. Familiarity. Almost every large text book, newspaper, and magazine that we have read since childhood has used this same formatting. People are creatures of habit. Give them something they're used to, and they'll eat it up faster than something "better" or "more creative".

HTML Column Techniques

The following techniques are available to us for creating equal-width columns of text in HTML.

Method 1 - Columns in Tables (aka The Old Way)

Before the days of CSS, we used tables to make columns of text.  It isn't the most appropos use of table structures, but in a limited environment, one uses the tools he has. 

<table width="100%" cellpadding="0" cellspacing="10" border="0">
    <tr>
        <td width="50%" valign="top">
            <p>Columns in text are a very handy tool.
            Unfortunately, most designers don't use
            them because they're tedious to 
            implement.</p>
        </td>
        <td width="50%" valign="top">
            <p>However, if you take the time and effort
            of putting them into use, you'll find 
            that they really add to the aesthetics 
            and functionality of your work.</p>
        </td>
    </tr>
</table>

Method 2 - Columns in Divs and CSS

This method is the approach designers should be taking today.  It uses a simple nested div architecture with CSS to determine the look of the columns.  Done correctly, this could be enhanced to handle multiple columns or wrapping overflow of objects within a div.   

 <style>

    #columns {
        width: 600px;
    }

    #columns .column {
        position: relative;
        width: 46%;
        padding: 1%;
        border: solid 1px #000;
    }

    #columns .left {
        float: left;
    }

    #columns .right {
        float: right;
    }

</style>

<div id="columns">
    <div class="left column">
        <p>Columns in text are a very handy tool.</p>
        <p>Unfortunately, most designers don't use
        them because they're tedious to implement.</p>
    </div>
    <div class="right column">
        <p>However, if you take the time and effort
        of putting them into use, you'll find 
        that they really add to the aesthetics 
        and functionality of your work.</p>
    </div>
</div>

And there ya have it!  Columns of text simple as that!