Three-Column Layout

A three-column layout is a little trickier because you have to balance content over the three sections of a page (not including the banner at the top, if you include one). However, if properly done and with a bit of artistic flair, a three-column CSS layout can be very attractive.

In this example, our three-column layout uses the two-column layout that we created earlier as its basis. We simply add a third column and balance everything out. The columns on the left and right can be used for navigation, ads, links, an internal search engine, or for that matter anything you want.

To create a three-column Web page, create an empty stylesheet file called threecol.css. Then, add the following code to the file:

div#bodyLeft { position: absolute; padding-left: 10px; width: 25%; }

div#bodyCenter { margin-left: 190px; margin-right: 190px; width: 50%; position: absolute; }

div#bodyRight { position: absolute; padding-right: 10px; width: 25%; right: 0%; }

div#topBanner { text-align: center; padding-bottom: 15px; }

As with the two-column layout, the bodyLeft division defines the column on the left. The bodyCenter division defines the column in the middle of the page that will be used for content. The bodyRight division is for the column on the right side of the page. The division labelled topBanner defines the space at the top of the Web page for the page's title or for some kind of graphic or ad.

I specified left and right margins for the bodyCenter division in order to properly center it on the page. Again, I specified the widths of each column to retain a balance on the page. You can experiment with the widths to find ones that suit your particular needs.

You'll notice that the bodyRight and bodyLeft divisions contain the padding-left and padding-right properties. These properties just add a bit of space between the edge of the browser window and the left and right columns. This is more for esthetics than anything else. You can experiment with different amounts of padding or remove these properties.

The bodyRight division also contains the property right: 0%. This property aligns the right column with the right side of the browser window and the top of the other two columns. If you don't include this property, the contents of the right column have been known to appear at the bottom of a page -- exactly where you don't want it to be.

After you have created your style sheet, create a blank HTML file. Link the file threecol.css to the HTML file. Then, set up your four divisions in the HTML file like this:

<div id="topBanner">Page Title</div>

<div id="bodyLeft">Add menu items here</div>

<div id="bodyCenter">Add your content here</div>

<div id="bodyRight">Add your content here</div>

Then, add your text and/or graphics to the file.