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.
So mixing together my fix for fluid inconsistencies and the One True Layout solution for equal height columns, we end up with this:
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.