I recently did a layout that required equal height columns with boxes inside the columns. I didn’t want to use tables, not because it’s not cool anymore, but because it’s difficult to maintain. Reading through embeded tables and trying to figure out where that missing td is…well, I certainly don’t miss it.

In addition, each page in this project was broken out into Mason components, with another developer building the logic and components. So calculating where to cut a table into a component looked like a huge headache for both of us. Try finding the missing td in a group of files….fun stuff, huh?

I used the ‘One True Layout‘ for this project because it fit the bill. Although, I have to admit that it was difficult for the other developer on the project to quickly absorb because it’s complex. At least this implementation was…it required equal height columns with boxes inside the left/right columns for blocks of content.

If the content in the center column exceeded the height of the left/right columns, the weight had to be distributed to the last box in the left/right column. This required what I like to call, ‘faux borders’. I used the ‘One True Layout’ to do the columns with borders in a way that pushed the last box border over the area of the content area. Basically the bottom border of the last box was hidden.

I then added a div for each column to create the bottom border. Sometimes it was 3-column, 2 column, etc. Project specs kept changing, but luckily, the layout I created was flexible enough to accomodate. Heck, they could have added 5 or more columns…it didn’t matter.

One of the challenges I ran into was that, in certain aspects of the design, a table just made sense. Except, I discovered the table rendering model in CSS2 adds margin on the table. (Or maybe I didn’t notice this before because I never did such a pixel-perfect design rendition.) The extra margin created a challenge because every element was a box, seperated by exactly 1px. In this case, I needed the cellspacing attribute for certain elements that just weren’t behaving well in IE.

All of these requirements made the CSS quite complex. So now…I’m beginning to move towards seperate a stylesheet for IE, as I see Douglas Bowman from StopDesign uses in his designs.

While browsing the web tonight, I found an article ‘Equal Height Boxes‘ by Roger Johansson that makes this type of layout appear a bit more simple. He uses the CSS properties display: table, display: table-row and display: table-cell.

Roger’s experiment is really interesting. However, he mentions it doesn’t work in IE so until IE is up to standard, this clean solution wouldn’t work for my previously mentioned layout.

“One True Layout” is complex but it is extremely flexible and kept my project going.