There are various solutions available to tackle this issue, such as the OneTrueLayout Technique, the Faux Columns Technique, and the CSS Tabular Display Technique.
The most effective approach for creating columns of equal height is the CSS Tabular Display Technique, which involves leveraging the display: table property.
This technique is compatible with Firefox 2+, Safari 3+, Opera 9+, and IE8.
The implementation code for the CSS Tabular Display:
The HTML
<div id="container">
<div id="rowWraper" class="row">
<div id="col1" class="col">
Column 1<br />Lorem ipsum<br />ipsum lorem
</div>
<div id="col2" class="col">
Column 2<br />Eco cologna duo est!
</div>
<div id="col3" class="col">
Column 3
</div>
</div>
</div>
The CSS
<style>
#container{
display:table;
background-color:#CCC;
margin:0 auto;
}
.row{
display:table-row;
}
.col{
display: table-cell;
}
#col1{
background-color:#0CC;
width:200px;
}
#col2{
background-color:#9F9;
width:300px;
}
#col3{
background-color:#699;
width:200px;
}
</style>
In scenarios where the table-cell width expands automatically causing issues, a simple solution is to add another div within the table-cell with a fixed width. However, over-expanding may occur in rare cases like exceptionally long words or wider divs than the table-cell's width.
The Faux Column Technique may offer a workaround, but it requires resizing the background image for column adjustments and lacks elegance.
The OneTrueLayout Technique involves creating an extensive padding-bottom to simulate equal heights, then adjusting the border position with negative margins. An example:
The HTML file:
<html><head>
<style>
.wraper{
background-color:#CCC;
overflow:hidden;
}
.floatLeft{
float:left;
}
.block{
padding-bottom:30000px;
margin-bottom:-30000px;
width:100px;
background-color:#06F;
border:#000 1px solid;
}
</style>
</head>
<body>
<div class="wraper">
<div class="block floatLeft">first col</div>
<div class="block floatLeft">
Second col<br />Break Line
</div>
<div class="block floatLeft">Third col</div>
</div>
</body>
</html>
An unimplemented aspect I find unfavorable is the inability to achieve 100% height within a container of automated height, prompting the need for revision by W3C.
Additional resources: link1, link2, link3, link4, link5 (important)