Problem
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.
