Equal Height columns with CSS, Part 2
Equal Height columns with CSS, Part 2
The technique
This version of the ‘Equal Height columns with CSS’ technique includes a fix that makes IE display the columns with the correct heights. Conditional comments are used to import an extra stylesheet that uses IE‘s proprietary expression property to set the height of all the columns to match the longest one.
The HTML
<div class="table">
<div class="table-row">
<div class="table-cell">
Cell content
</div>
<div class="table-cell">
Cell content
</div>
<div class="table-cell">
Cell content
</div>
</div>
</div>The CSS
The basic layout:
body {
text-align: center;
}
.table {
text-align: left;
  ;margin: 0;
padding: 0;
background: none;
}
.one, .two, .three {
float: left;
height: 100%;
heigh\t: expression((document.getElementById
('rowheight').offsetHeight - 20) + 'px');
margin: 0;
padding: 0;
width: 33%;
border: solid 10px #898B60;
border-right: none;
}
.three {
width: auto;
  ;margin-right: 0;
border-right: solid 10px #898B60;
}
.tablerow {
float: left;
height: 1%;
margin: 0;
padding: 0;
}