Relatively Simple 3 Equal-Height Columns CSS Liquid Layout

/*** Start of 3 columns layout styles ***/

div.main-box {
position:relative;
text-align:left;
overflow:hidden;
/* This width property must be equal to the width of the layout, 100% to stretch */
width:80%;
/* This background property is the background of the left column */
background:#006699;
/* This is the border of the entire view */
border:solid 10px white;
}
div.top-box {
/* This background property is the background of the top row */
background:#0099CC;
/* This is the bottom border of the top */
border-bottom:solid 10px white;
}
div.bottom-box {
/* This background property is the background of the bottom row */
background:#6699CC;
/* This is the top border of the bottom */
border-top:solid 10px white;
}
div.center-box {
position:relative;
width:100%;
/* This left property must be equal to the left width */
left:120px;
/* This background property is the background of the center column */
background:#0066CC;
/* This is the left border of the center content */
border-left:solid 10px white;
}
div.reset-box {
position:relative;
width:100%;
left:100%;
/* This margin-left property must be equal to the left width with a minus in front */
margin-left:-120px;
} 
div.right-box {
position:relative;
width:100%;
/* This margin-left property must be equal to the right width with a minus in front */
margin-left:-22%;
/* This left property must be equal to the sum of borders size with a minus in front */
left:-20px;
/* This background property is the background of the right column */
background:#99CCCC;
/* This is the right border of the center content */
border-left:solid 10px white;
}
div.content-box {
position:relative;
width:100%;
margin-left:-100%;
/* This left property must be equal to the right width */
left:22%;
}
div.left-col {
float:left;
/* This width property must be equal to the left width */
width:120px;
}
div.right-col {
float:right;
/* This width property must be equal to the right width */
width:22%;
}
div.center-col {
/* This margin-left property must be equal to the left width */
margin-left:120px;
/* This margin-right property must be equal to the right width */
margin-right:22%;
/* This padding-left property must be equal to the border size */
padding-left:10px;
/* This padding-right property must be equal to the border size */
padding-right:10px;
}
* html div.center-col {
height:1%;
margin:0;
}
* html div.left-col {
margin-right:-3px;
}
* html div.right-col {
margin-left:-3px;
}
.clearfix:after {
content: "."; 
display: block;
height: 0px;
clear: both; 
visibility: hidden;
}
.heightfix:before {
content:'.';
display:block;
visibility:hidden;
height:0;
}

/*** End of 3 columns layout styles ***/