Day 25: CSShortcomings: the equal height columns debacle.

I am currently coding a website I designed and by in large it goes well but there this little annoying detail.

Generally when I design a website I do not thing about how easy it will be to code it. I strongly believe that I design for the presentation of the content and not for the code. This time as well I did not think about the little quirk of CSS, namely the total lack of markup that allows for creating equal height columns independent of the content.

Equal Height Columns layout

Equal Height Columns layout

One would think it can’t be that difficult but sadly there is no actual CSS rule or property that does that. Therefore one is limited to tricks (at best), hacks or improper markup (at worst).

Assuming that one feels using tables for non-tabular data is a capital offence, one is limited to 4 possible methods.

1. Nested Columns by Mathew James Taylor

This is the cleanest code method and would work in any kind of browsers. Sadly it will not work  if you wish to have space between the columns or borders around each of them.

This problem is a result of how this method works. The columns are nested and each of them extends all the way to the left of the page. Content is than placed separately on top of the background. Column most to the right is at the bottom of the stack and stretches to the left side of the page. And the next column is placed inside and on top and moved x% to the left and again stretches to the left side of the page etc.

2. Display: table

This is an ok solution. It uses CSS3 display:table and display:table-cell properties. It will require a small hack (extra empty column in the middle) if you want to have space between columns or borders around them. Unfortunately, the solution falls flat in IE7 or below. It breaks down the layout and the columns are places under each other. The remedy to this problem could be an alternative CSS for older browsers.

3. Faux columns

Faux columns is a solution devised by my CSS guru, Dan Cederholm. It includes making a slice of background and repeating it vertically in the parent div to simulate the columns. It does not work for liquid or % based layouts and it also means adding empty divs to the markup if one wants borders or rounded corners.

4. Jquery

This method obviously uses an interaction tool to build layout so it is a hack. However it does not upset the markup of the actual website and works in all browsers. Of course some people may not have JavaScript enabled but, let’s face it, that is incredibly rare. And even if they did they would still see a valid website, just that the columns won’t be equal in height.

As you can see there are ways to deal with the problem (as there are methods for nearly everything in css) but none of them is really clean and error-proof.

It sure would be nice if there was a simple CSS3 property to do the job… 

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>