This article was written in 2009. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

Equal height boxes with flexible widths

My design buddies @work came up with one of the most complex layouts I ever had to build. You could desribe it as an elastic layout with boxes with a flexible width which should have the same height as it’s siblings. With rounded corners and dropshadows offcourse. But that would be too easy a description. There are templates with 2, 3 and 4 boxes next to each other and these boxes can be contained within containers with different widths. A cynic would ask me why I didn’t use tables and he would be right. It might have saved me a lot a hassle. But forget about tables.

One way to build a layout like this is to measure all possible box-sizes to the pixel, create all background-images for these boxes (a few hundred in this extreme case) and start writing a CSS file of a few thousand lines. I chose to see if there’s another way to do this, with less code and much less images (one). And here I present this other way.

Equal height cols with a flexible width

Basically what this technique comes down to is to place an absolutely positioned div inside a statically positioned floating div which is inside a relatively positioned div with overflow set to auto. The absolutely positioned div can inherit the left position and the width of its direct parent, but if you define its top and its bottom it will, off course, inherit these from the containing, relatively positioned div. And this relatively positioned div will get its height from the highest statically positioned floating div. Why didn’t you think of this before? (-:

Check out these examples

1. Equal height cols with a flexible width
2. Equal height cols with a flexible width, a border and padding between the boxes
3. Equal height cols with a flexible width, padding between the boxes, rounded corners, dropshadows and flexible background-colors

IE6 needs JavaScript. I didn’t bother to include it here. Opera needs an update in order to display this correctly, I filed a bugreport. IE7 has difficulties with percentages.