Throughout the book, we’ve been talking primarily about the insides of web page ele-
ments—the guts. But what about the framework? For years, designers have relied on tables
for structuring columnar layouts, often nesting multiple tables inside each other to achieve
just the right amount of spacing or visual effect. These bloated layouts can be slow to
download and slow to work with in terms of code maintenance—not to mention often
unreadable in text browsers, screen readers, and small- screened devices.
In this chapter, we’ll combine CSS and structured markup to create a two- column layout
using four popular methods. In turn, we’ll show that it’s possible to create columnar
designs without nested tables and spacer GIFs.
Later, in the “Extra credit” section, we’ll discuss the box model problems found in Internet
Explorer 5 for Windows and how to get around it. We’ll also share a simple secret for get-
ting equal- length columns with CSS.
How can I use CSS to build a two- column
The answer is several ways. To get you started, and to help you understand the fundamen-
tal difference between two of the most popular methods (floating and positioning), I’ve
decided to focus on four options—all of which result in a two- column layout with a header
on top and a footer at the bottom.
My hope is that by using this chapter as a guide, you can begin to build the framework for
sites that contain many of the rest of this book’s examples.
Each of the four methods that we’ll focus on take place between the <body> and </body>
elements of the document, and I’ve introduced the markup structure that we’ll be using at
the beginning of each method.
To give you an idea of the entire page structure that surrounds the methods, let’s outline
what else would be included:
<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<meta http-equiv="Content- Type" content="text/html; charset=utf- 8" />