CSS Cookbook

7.7. Creating a Flexible Multicolumn Layout with Positioning

Problem

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

Figure 7-15. Four-column layout with percentage-based widths

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

<div id="header">
 [...]
</div>
<div id="columnLeft">
 [...]
</div>
<div id="columnInnerLeft">
 [...]
</div>
 [...]
<div id="columnInnerRight">
  [...]
</div>
 [...]
<div id="columnRight">
 [...]
</div>

Figure 7-16. The default rendering of the content

Next, use the position property in each column, setting the value to absolute while setting the placement of the columns with the left and top properties:

#columnLeft {
 position: absolute;
 left:1%;
 width:20%;
 top: 4em;
 background:#fff;
}
#columnInnerLeft {
 position: absolute;
 left: 22%;
 width: 28%;
 top: 4em;
 background: #fff;
 text-align: justify;
 border-width: 0;
}
#columnInnerRight {
 position: absolute;
 left: 51%;
 width: 28%;
 top: 4em;
 background: #fff;
}
#columnRight {
 position: absolute;
 left: 80%;
 width: 19%;
 top: 4em;
 background: #fff;
}

Discussion

By setting the position property to absolute you take the element completely out of the ...