CSS Cookbook

7.6. Creating a Fixed-Width Multicolumn Layout with Floats

Problem

You want to create a three-column layout with fixed-width columns.

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-13):

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

Figure 7-13. The default rendering of the page

Next, wrap the div elements that compose the main and left columns in another div element and set the value of the id attribute to enclose. Also, wrap another div element around the entire set of div elements, setting the value to frame:

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

Set the width of the page using an id selector for the “frame” div element:

#frame {
 margin-left: 20px;
 width: 710px;
}

Next, set the column div elements as well as the div element with the id value of enclose to float (see Figure 7-14):

#columnMain { float: right; width: 380px; } #columnLeft { float: left; width: 150px; } #columnRight { float: right; width: 120px; } #enclose { float:left; width:560px; } #footer { clear: both; padding-top: ...