A c t i o n f o r L i b r a r i e s — A p r i l 2 0 0 2

The Internet Connection

By Michael Sauers

Creating Columns without Tables
Many Web authors don't realize in these days of cascading style sheets (CSS) that it is possible to create multiple-column layouts on their Web pages without resorting to tables. With the use of some basic CSS, columns of text or other content on your Web page are much easier to code than with the old table method.

For example, here is the code necessary to create a simple two-column page:

CSS Classes
.left {float: left; width: 49%}
.right {float: right; width: 49%}

XHTML (HTML) Tags
       <div class="left">
       content of the left column
       </div>

       <div class="right">
       content of the right column
       </div>

Here's how it works. Using the CSS coding, the Web author creates two classes, each one taking up 49 percent of the available window display space. One class is placed on the left side of the screen, the other on the right. With the XHTML or HTML coding, the Web author contains the document content he/she wishes to display in the left column within a div tag classified as "left." The content for the right column is contained within a div tag classified as "right." See the result at right.

One important note: Although it would seem logical to set the widths of both classes as 50 percent, this would not work. There is built-in padding in the classes, and if they total 100 percent, they will overlap and not appear as intended. It is best to create the classes to fill no more than 98 percent of the space to allow for the invisible padding.

Next Article | Previous Article | Table of Contents | BCR Publications