Columns

Newspaper-style columns have been the "holy grail" of web design for a long time. When tables were introduced, web designers came up with the hack of putting an entire web page into a table, and then specifying table elements of various widths in order to have columns.

Many web pages today continue to have complex table structures in their HTML code. We will not be bothering with those hacks.

The next specification for CSS, called CSS3, supposedly will have explicit column controls. Meanwhile, we have to use a bit of a hack ourselves.

The best CSS hack for columns is to specify each column as a floating box, where the box floats to the left. I picked this up from Eric Costello's site.

.header_left{
float: left;
width: 33%;
font-style: italic;
font-size: 125%;
background: #33ffff;
border: solid thin blue;
padding: 2%;
}

.header_center{
float: left;
width: 33%;
padding: 2%;
text-align: center;
}

.header_right{
float: left;
text-align: right;
width: 33%;
font-style: italic;
font-size: 125%;
background: #33ffff;
border: solid thin blue;
padding: 2%;
}

<div class = "header_left">
Web Design
</div>
<div class = "header_center">
<a href = "../index.html">
Table of Contents</a>
</div>
<div class = "header_right">
by Arnold Kling
</div>

Note that even though the .header_center and .header_right classes both specify float: left;, they fit to the center and to the right, respectively. That is because they are placed right next to each other by the HTML code above.

If you want to see the results of this combination of CSS code and HTML code, scroll to the top of the page.

The approach of using floating boxes can lead to text at the end of the columns that wraps into the right column. This looks ok, but it may not be what you want.

If you want to have text resume only at the bottom of all of the columns, then you should use nesting. First, you create an outer box with a height of 100%. Then, you put the columns inside the outer box.

.outerbox{
height: 100%;
border: thin solid black;
/* note that the border is OPTIONAL. It may look better without a border. */
}
.leftcolumn{
float: left;
width: 50%;
padding: 2%;
}
.rightcolumn{
float: left; width: 50%;
padding: 2%;
}

< div class = "outerbox">
< div class = "leftcolumn">
Here are the contents of the left column. We make it somewhat longer than the right column, so that there is some space to the right. </div>
< div class = "rightcolumn">
Here are the contents of the right column. </div>
</div>
<p>Here is some additional text, that we want to appear below both columns. </p>

Try the above code. Try it both with and without a border. Then, take out the <div class = "outerbox"> tag and its final closing </div> tag. Reload the page and observe what happens.