CSS Cookbook

7.3. Building a Two-Column Layout

Problem

You want to create a two-column layout with columns that resize to the width of the browser, as in Figure 7-4.

Figure 7-4. Two-column layout achieved through CSS

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values (see Figure 7-5).

Figure 7-5. The default rendering of the page

For demonstration purposes the values of the id attributes are used to show where the content is displayed when CSS is used. Semantic values would be preferred, like mainContent or sidebar, instead of using values that represent their placement on the page:

<div id="columnLeft">
 [...]
</div>
<div id="columnRight">
 [...]
</div>
<div id="footer">
 [...]
</div>

Then, in CSS, use the float property to move the contents of the left column to the left, and set a width that is two-thirds the web document’s width:

#columnLeft {
 float: left;
 width: 67%;
 background:#fff;
 margin-top: 0;
 margin-right: 1.67em;
 border-right: 1px solid black;
 padding-top: 0;
 padding-right: 1em;
 padding-bottom: 20px;
}

The right column wraps around the contents of the left column. On the right column, set the top of the margin and padding to 0, allowing the column and the first element in it to become level with the left column:

#columnRight { padding-left: ...