CHAPTER 12
CSS LAYOUTS
WEB STANDARDS SOLUTIONS
180
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
layout?
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>CSS Layouts</title>
<meta http-equiv="Content- Type" content="text/html; charset=utf- 8" />
</head>
<body>
...method examples...
</body>
</html>
CSS LAYOUTS
181
12
And to give you a general idea of the layout we’re aiming for throughout each method, take a
look at Figure 12-1 for a visual overview of the columnar layout we’d like to achieve.
Figure 12-1. Wireframe of the intended
two- column layout
Let’s get started by introducing the first method that utilizes the float property.
Method A: Floating the sidebar
<div id="header">
...header content here...
</div>
<div id="sidebar">
...sidebar content here...
</div>
<div id="content">
...main content here...
</div>
<div id="footer">
...footer content here...
</div>
The preceding example is the markup we’ll be using to create a columnar layout with CSS
using the float property. We’ve divided our page elements into logical segments using
<div> elements—each of which have a unique id attached to them:
#header: Contains a logo, navigation, or other top- level items
#sidebar: Contains extra contextual links and information
WEB STANDARDS SOLUTIONS
182
#content: Contains the main body of text and focus of the page
#footer: Contains copyright information, credits, ancillary links, etc.
Sectioning off these elements of the page enables us to take full control of the layout. By
applying a few CSS rules, we’ll have a two- column layout working in no time.
Styling the header and footer
The first step we’ll take in making our structure a columned layout is to add some background
color and padding to the header and footer. This will make it a bit easier to visualize.
#header {
padding: 20px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
Adding the preceding CSS to Method A’s structure will give us what’s shown in Figure 12-2.
I’ve added a bit of faux content to fill out the sections.
Figure 12-2. Adding style to the header and footer

Get Web Standards Solutions: The Markup and Style Handbook, Special Edition now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.