O'Reilly logo

CSS Cookbook, 3rd Edition 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

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 shown in Figure 11-2.

Two-column layout achieved through CSS

Figure 11-2. Two-column layout achieved through CSS

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values. Semantic values are preferred, such as mainContent or sidebar, instead of values that represent their placement on the page.

For demonstration purposes only, the values of the id attributes are used to show where the content is displayed to help you better understand how the content is going to be displayed in the code:

<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: 2em;
 margin-top: 0;
 padding-top: 0;
}
h1 {
 margin-top: 0;
 padding-top: 0;
}

To display the ...

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