Learned today: CSS column heights
CSS is an interesting and wonderful thing. As a web developer, I’ve seen the best and worst in the changes in how websites are made over the years. I remember the days of using tables to lay out content long before I ever knew what CSS was. I’m going on year 5 or 6 of being somewhat of a CSS guru and in those years not once have I ever needed to use tables for laying out a site’s content. Tables are, as you can guess, for tabular data.
Imagine this scenario for a minute: you’re developing a site that uses 3 columns. This isn’t out of the ordinary. The tricky part is that you want the left and right columns to be used for tiling backgrounds/accents that inherit the height of the center column where content will reside. The problem is that this isn’t possible with CSS without some hacking. This is possible if you go back to 1995 and use tables. A column in a table will automatically inherit the height of the column next to it regardless of the amount of content filling it. In CSS, divs are independent of each other.
So after wracking my brain for an hour on how to get around this problem, I found this article. After testing the provided Javascript and incorporating it into the design I’m working on, it does exactly what I need it to.
I have so much respect for anyone who does work like this by providing fixes and hacks (for free no less) and only asks that they get credit for their work in return.
March 25, 2008 - late evening
Tags: