Article
HTML Utopia: Designing Without Tables Using CSS, Chapter 5: Building the Skeleton
Basic Three-Column Layout
The sample site for this book, Footbag Freaks, uses a combination of a three column layout with a header at the top and a footer at the bottom. This is a classic Web page design. Some have even called it “the Holy Grail” when it includes a fluid center column. The first place I saw this reference was on Eric Costello’s website, http://www.glish.com/.
To understand the CSS involved in creating this basic page layout, let’s start by looking at the core code for building a three-column layout with a fluid center column. Then, we’ll add the top-level header area. Finally, we’ll take apart the core of the Footbag Freaks home page to see how we built the site on the basis of those standards, but tweaked it a little to produce a more creative design.
A basic three-column layout involves a CSS style sheet with separate rules for the layout and positioning of the left-hand column, the center column, and the right-hand column. We’ll call these three sections left, center, and right. Later, we’ll mix in the top and bottom areas. Here is the CSS rule that defines the block whose identifier is left:
#left {
position: absolute;
left: 10px;
top: 10px;
width: 200px;
}
This is quite straightforward. Using absolute positioning, this column has its upper left corner placed 10 pixels down from the top of the document area of the browser and 10 pixels to the right of the left margin of that space. It sets a fixed width for the column, though as we’ll see, you could supply a relative value (such as a percentage) to create a stretchy layout that would keep the left column’s width proportional to the document area’s width.
The center column of the three-column layout uses the following CSS rule:
#center {
margin-left: 220px;
margin-right: 220px;
}
Note that this column is not positioned. Its position will thus retain its “natural” place based on its location in the HTML file that generates the page. Margin settings of 220px ensure that the left and right columns (which are set to 200 pixels in width and 10 pixels in from the document edge) will have room for their content without overlapping any of the adjoining columns.
Finally, a basic right-hand column looks much like the left:
#right {
position: absolute;
right: 10px;
top: 10px;
width: 200px;
}
Here, the right: 10px property is used to ensure that the this column is placed with its right hand side 10 pixels from the right hand side of the page. The impact of these style rules on a demonstration HTML page can be seen in Figure 5.22.
Figure 5.22. Demonstration Basic Three-Column Layout
Here’s the HTML for the page in Figure 5.21. The <link> tag in the header points to the threecoldemo.css file, which contains the three CSS rules above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Three-Column Layout Demonstration</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="threecoldemo.css" type="text/css" />
</head>
<body>
<div id="left">
<p>
This is quite straight-forward. Using absolute positioning,
this column has its upper left corner placed 10 pixels down
from the top of the document area of the browser and 10
pixels to the right of the left margin of that space. It
sets a fixed width for the column, though as we will see,
you could supply a relative value (such as a percentage) to
create a stretchy layout that would keep the left column's
width proportional to the document area's width.
</p>
</div>
<div id="center">
<p>
Notice that this column is not able to be positioned. Its
position will thus retain its "natural" place based on its
location in the HTML file that generates the page. Margin
settings ensure that the left and right columns (which are
set to 200 pixels in width) will have room for their content
without creating a visible space between any of the
adjoining columns.
</p>
</div>
<div id="right">
<p>
The right-hand column is so much like the left-hand column
that it seems unworthy of comment.
</p>
</div>
</body>
</html>