7.3. Building a Two-Column Layout


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


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 id="columnRight">
<div id="footer">

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

Get CSS Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.