Need as many extra DIVs as the number of columns. So if we are creating a 3-column layout, we will need 3 extra DIVs:
<div id='container3'>
<div id='container2'>
<div id='container1'>
</div>
</div>
</div>
The borders are from container2 and container1. They are both using border-right.
Container2 is shifted left by the width of the right column. Container3 is shifted left by the width of the middle column.
Because all 3 columns were shifted left by (width of middle column + width of the right column), all 3 columns needs to be shifted right by that much space.
#leftnav_div {
width: 150px;
padding-right: 10px;
float: left;
position: relative;
left: 790px
}
#content_div {
width: 610px;
float: left;
padding: 0 10px;
margin-bottom: 20px;
overflow-x: hidden;
position: relative;
left: 790px;
}
#rightsection_div {
width: 150px;
padding-left: 10px;
float: left;
overflow-x:hidden;
position: relative;
left: 790px;
}
#equal_height_container3, #equal_height_container2, #equal_height_container1 {
float: left;
width: 100%;
position: relative;
}
#equal_height_container2 {
right: 160px;
border-right: 1px solid rgb(128, 128, 128);
}
#equal_height_container1 {
right: 630px;
border-right: 1px solid rgb(128, 128, 128);
}
#equal_height_container3 {
overflow: hidden;
}
Equal Height Columns with Cross-Browser CSS
http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
http://css-tricks.com/fluid-width-equal-height-columns/
http://www.addedbytes.com/css/faux-columns-for-liquid-layouts/
Four Methods to Create Equal Height Columns
