O'Reilly logo

CSS Cookbook by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Two-column layout achieved through CSS

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).

The default rendering of the page

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: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required