The Solution to Fluid Inconsistencies and Equal Height Columns (revisited)

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.

Published by

Jamie

Hi, I am the Managing Director of SonicIQ Limited in the UK. I have been working in the web development industry since 1999 and have been running SonicIQ since 2001. Currently Ruby On Rails is my preferred development platform. I am experienced in designing with web standards, HTML5, CSS3 and Javascript.

2 thoughts on “The Solution to Fluid Inconsistencies and Equal Height Columns (revisited)”

  1. Jamie, are you still seeing problems with the anchor links issue? I’ve been using an almost-identical technique as you since mid-2010 (I’m “buckthorn” in the comments section), and have not encountered any problems with it (at least that we are aware of). Ironically, perhaps, my idea (well, i thought it was “my idea” at the time) was inspired (albeit second-hand) by a Paul O’Brien article. My initial attempts to accommodate for IE 7 didn’t work so well, so whenever we decide to add support for IE 7, we revert back to faux columns on a separate IE7 style sheet.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>