This is a follow on from my previous article on fluid equal height columns, please consider reading this first if you are interested on how I arrived at this solution.
I have been happily using both techniques in my previous article, however was not happy with the use of CSS expressions in the equal height solution. Paul O’Brien noted that my technique suffered the same problem as the One True Layout solution, so unless you need to link to anchors in a column, the old technique seems to be the cleanest. I very rarely have the need to link to anchors except for say comments in a blog, in which case a simpler two column solution or the use of javascript may be more applicable.
So mixing together my fix for fluid inconsistencies and the One True Layout solution for equal height columns, we end up with this:
.content { overflow: hidden; position: relative; background: #f5f5f5;
height: 1%; /* IE6 hasLayout */ }
.content div { float: left; position: relative; margin-left: -100%; width: 8.333%; padding-right: 1px;
padding-bottom: 32767px; margin-bottom: -32767px; /* Equal height columns */ }
.content .col3 { left: 100%; background: #eee; z-index: 1; }
.content .col2 { left: 108.333%; background: #ddd; z-index: 2; }
.content .col1 { left: 116.666%; background: #ccc; z-index: 3; }
etc...Notice the “padding-right: 1px;” on the columns, this will not be seen in most cases due to the column z-ordering but stops unsightly gaps caused by rounding.
View final example.
So this is a marriage of an old technique for equal height columns and a new technique for flexible column positioning. We are using no CSS hacks and it will work in Safari, Chrome, Firefox, and IE back to version 6
I will continue my search for a solution to the age old anchor problem and in the meantime, any suggestions are most welcome.