• Choose a category
• All
• Classic-Fiction

Building a Three-Column Design

Sometimes, you’ll prefer a three-column design. It’s a simple variation of the two-column approach. Figure 2-6 shows a simple three-column layout.

This design uses very basic CSS with five named divs. Here’s the code (with the dummy paragraph text removed for space):

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

type = ”text/css”

href = ”threeColumn.css” />

Figure 2-6: This is a three-column floating layout.

Styling the three-column page

As you can see from the HTML, there isn’t really much to this page. It has five named divs, and that’s about it. All the really exciting stuff happens in the CSS:

#head {

text-align: center;

}

#left {

float: left;

width: 20%;

padding-left: 1%;

}

#center {

float: left;

width: 60%;

padding-left: 1%;

}

#right {

float: left;

width: 17%;

padding-left: 1%;

}

#footer {

border: 1px black solid;

float: left;

width: 100%;

clear: both;

text-align: center;

}

Each element (except the head) is floated with an appropriate width. The process for generating this page is similar to the two-column layout:

1. Diagram the layout.

Begin with a general sense of how the page will look and the relative width of the columns. Include the names of all segments in this diagram.

2. Create the XHTML framework.

Create all the necessary divs, including id attributes. Add representative text so you can see the overall texture of the page.

3. Add temporary borders.

Add a temporary border to each element so you can see what’s going on when you start messing with float attributes. This also ensures you have all the selectors spelled properly.

4. Float the leftmost element.

Add the float attribute to the leftmost column. Don’t forget to specify a width (in percentage).

5. Check your work.

Work in the Web Developer CSS editor (where you can see changes on the fly) or frequently save your work and view it in a browser.

6. Float the center element.

Add float and width attributes to the center element.

7. Float the right-most element.

Incorporate float and width in the right element.

8. Ensure the widths total around 95 percent.

You want the sum of the widths to be nearly 100 percent but not quite. Generally, you need a little space for margins and padding. Final adjustments come later, but you certainly don’t want to take up more than 100 percent of the available real estate.

9. Float and clear the footer.

To get the footer acting right, you need to float it and clear it on both margins. Set its width to 100 percent, if you want.

10. Tune up.

Remove the temporary borders, adjust the margins and padding, and set alignment as desired. Use percentages for margins and padding, and then adjust so all percentages equal 100 percent.

Early versions of Internet Explorer (6 and earlier) have a well-documented problem with margins and padding. According to the standards, the width of an element is supposed to be the width of the content, with borders, margins, and padding outside. A properly behaved browser won’t shrink your content when you add borders and margins. The early versions of Internet Explorer (IE) counted the width as including all borders, padding, and margin, effectively shrinking the content when you added these elements. If your page layout is looking a little