A five columns layout

Back to the article

This example shows a five columns layout built using the 'float' property. Here's the source:

HTML code

<body>
 <div id="col-1">...</div>
 <div id="col-2">...</div>
 <div id="col-3">...</div>
 <div id="col-4">...</div>
 <div id="col-5">...</div>
 <div id="footer">...</div>
</body>

CSS code

* html body #col-5 {width: 19%;}
* html body #col-5 p {margin-right: -2px;}

#col-1, #col-2, #col-3, #col-4, #col-5 {
margin: 0;
padding: 0;
float: left;
width: 20%;
}

#footer {
margin: 0;
padding: 1em 0;
border-top: 1px solid #000;
text-align: center;
clear: left;
}

Comments

Here the main difficulty lies in the width of the last column. In fact, both Explorers (5 and 6) break the floats sequence and put #col-5 on a new line. So we need the hack marked in red. Note that with this hack we lose the correct vertical alignment of the last column when we resize the browser's window (for istance, at 800 x 600 pixels).