Question

I’m wondering if it’s possible to use CSS display:table type styles for nested divs where the rows are children of the columns. Here’s an example jsfiddle:

http://jsfiddle.net/UrWEn/1/

Or is there another clean method to lock together the heights of the divs in each “row” based on the largest “cell”?

For various reasons I want to avoid:

• Changing the markup.
• Setting fixed heights on the rows.
• Using Javascript.

Answer 1

Looks like the answer is no. Tables aren’t designed to be built with columns first, so there are no styling options dealing with this kind of layout.

html table – by rows or columns

I had to resort to using javascript to set each “cell” height to that of the highest in its “row”. It’s the least bad option for my application.

http://jsfiddle.net/UrWEn/4/

var length = $('.column').eq(0).find('.cell').length, // number of rows
    $cells; 

while (length) {
    $cells = $('.cell:nth-child('+ length +')'); // all cells in row
    $cells.height(Math.max.apply(null, $cells.map(function() {
        return $(this).height();
    })));
    length--;
}