If you have come from the "old school" of web development where everybody used tables for layout, it can come as a bit of a shock when migrating to more "accessible" page design using Cascading Style Sheets - where the DIV is king.
A simpe thing like placing three equal height columns on a page is a breeze with tables - but a bit more challenging when using DIVs.There are hundreds of CSS solutions out there on the web for a three-column layout, but I wanted one which had borders and spacing between the columns. Well after a lot of research I finally found one which is truly scaleable (try resizing your browser).
Have a look at the following three boxes. Notice how they are all the same height:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper.
Sed nascetur et elit id malesuada parturient Aliquam vel dolor in. Nullam dignissim pede justo justo accumsan consectetuer ipsum nunc Mauris eu.
Praesent mauris. Proin arcu. Maecenas elementum. Curabitur congue, ante ut pretium suscipit, lectus elit porttitor arcu, ac porta magna ante sit amet nulla. Suspendisse sed tellus.
Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia.
Urna nec at eget Donec congue ultrices lacinia mauris consectetuer hendrerit.
They are all DIVs, constructed in such a way that they APPEAR to be joined together much like columns in a table though this is not the case.
Here is the CSS:
<style type="text/css">
/* (3-column format) */
#frame {
width:100%;padding-top:10px;
}
#container{
overflow:hidden;
}
#container div{
float:left;background:#CCFF99;border:1px solid #167E00;width:31%;margin-right:10px;margin-bottom:-2000px;padding-bottom:2000px;
}
#container .column-2{
background:#CCFF99;
}
#container .column-3{
margin-right:0;width:31%;
}
#container p{
padding:5px 5px 5px 5px;margin:0px;font-family:Arial;font-size:0.8em;
}
#footer{
overflow:hidden;
}
#footer div{
float:left;background:#167E00;border:1px solid #000;width:31%;margin-right:10px;margin-bottom:-2000px;padding-bottom:2000px;
}
#footer .column-2{
background:#167E00;
}
#footer .column-3{
margin-right:0;width:31%;
}
</style>
If you adjust the column percentages (currently all set to 31%) you can tailor the columns as required - just make sure they add up to the same amount!
Here is the HTML for the columns (the latin is optional):
<div id="frame">
<div id="container">
<div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ac lectus ac ligula cursus ullamcorper. </p>
<p>Sed nascetur et elit id malesuada parturient Aliquam vel dolor in. Nullam dignissim pede justo justo accumsan consectetuer ipsum nunc Mauris eu. </p>
</div>
<div class="column-2"><p>Praesent mauris. Proin arcu. Maecenas elementum. Curabitur congue, ante ut pretium suscipit, lectus elit porttitor arcu, ac porta magna ante sit amet nulla. Suspendisse sed tellus.</p>
<p> </p>
<p><br>
</p>
</div>
<div class="column-3">
<p>Morbi feugiat metus sit amet urna. Etiam faucibus diam at mi egestas elementum. Mauris tempus, neque quis scelerisque lacinia.</p>
<p> </p>
<p>Urna nec at eget Donec congue ultrices lacinia mauris consectetuer hendrerit.</p>
</div>
</div>
</div>
<div id="footer" style="height:1px"><div></div><div class="column-2"></div><div class="column-3"></div></div>
The footer code is actually another three columns "collapsed" to create a bottom border for the columns.