CSS Cookbook

7.5. Creating a Flexible Multicolumn Layout with Floats

Problem

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

Figure 7-10. Three-column layout achieved through CSS

Solution

First, mark up the content with div elements using the id attributes that contain appropriate values representing their placement on the page (see Figure 7-11):

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

Figure 7-11. The default rendering of the page

Next, set each column to float to the left, making sure that the width is a percentage. All three values of the columns should equal 100% (see Figure 7-12):

#columnRight {
 width: 33%;
 float: left;
 background: white;
 padding-bottom: 1em;
}
#columnLeft {
 width: 20%;
 float:left;
 background: white;
 padding-bottom: 1em;
 text-align: justify;
}
#columnMain {
 width:47%;
 float:left;
 background: white;
 padding-bottom: 1em;
}
#footer {
 clear: both;
 padding-bottom: 1em;
 border-top: 1px solid #333;
 text-align: center;
}

Figure 7-12. An increased width for the main column forcing the right column ...