Recipe 7.8 Creating a Fixed-Width Multicolumn Layout with Positioning

Problem

You want to create a four-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:

<div id="header">

 [...]

</div>

<div id="columnLeft">

 [...]

</div>

<div id="columnInnerLeft">

 [...]

</div>

 [...]

<div id="columnInnerRight">

  [...]

</div>

 [...]

<div id="columnRight">

 [...]

</div>

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, making sure to use pixels for the units:

#columnLeft {

 position: absolute;

 left:5px;

 width:190px;

 top: 44px;

 background:#fff;

}

#columnInnerLeft {

 position: absolute;

 left: 205px;

 width: 190px;

 top: 44px;

 background: #fff;

 text-align: justify;

 border-width: 0;

}

#columnInnerRight {

 position: absolute;

 left: 405px;

 width: 190px;

 top: 44px;

 background: #fff;

}

#columnRight {

 position: absolute;

 left: 605px;

 width: 190px;

 top: 44px;

 background: #fff;

}

Discussion

Setting the width of the columns as well as the left and top properties to length units creates the fixed-width columns. This Solution is just as easy with two to three or more columns. Remember that anything more than four or five columns might be impractical.

See Also

Recipe 7.4 on creating a fixed-width two-column layout; Recipe 7.6 on creating a fixed-width multicolumn layout with floats.