That’s a good point, but I don’t think it’s difficult to fix. For instance, I have already modified my code above to work with the onresize event. (see http://stephenakins.blogspot.com/2011/01/uniform-div-heights-for-liquid-css-p.html). It’s not the same thing as what you’re talking abot but if the dynamic content could be made to trigger a reflow function that first got the new height, it should work fine. Maybe I’ll update my code to accommodate dynamic content.

Once the heights are set on DomReady you would need a lot more code to recalculate proper height everytime something changes dynamicallly. Even then you could get page flicker when recalculating proper height.

And what about when the height of some content elements is animated?

Seeing that {display:table-cell} doesn’t need a specific parent, it seems not so different than {display:inline-block}.
Not to mention that {display:table-column} doesn’t work at all …

Much better and much more interesting the CSS3 {display:box} with the others following box-properties.

<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″ />

for an explanation of why Microsoft thinks this is desirable:
http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx

Here is the jQuery for those of you who are interested (I’m assuming the floating DIVs have the class “floatingDiv” assigned to it):

$(document).ready(function() {

var currentTallest = 0;
var currentRowStart = 0;
var rowDivs = new Array();

$(‘div.floatingDiv’).each(function(index) {

if(currentRowStart != $(this).position().top) {

// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = $(this).position().top;
currentTallest = $(this).height();
rowDivs.push($(this));

} else {

// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($(this));
currentTallest = (currentTallest < $(this).height()) ? ($(this).height()) : (currentTallest);

}
// do the last row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) rowDivs[currentDiv].height(currentTallest);

});

});

Actually i was really trying very hard to find some table layout without using Table then, i come across some techniques

<ol id="main">
<li id="main">left block</li>
<li id="main">body block</li>
<li id="main">right block</li>
</ol>

<style>
* {margin:0;padding:0;}
#main{display:table-row; list-style-type:none }
#left,#body,#right {display:table-cell;}
</style>
Its really worked for me

Actually i was really trying very hard to find some table layout without using Table then, i come across some techniques…

left block
body block
right block

* {margin:0;padding:0;}
#main{display:table-row; list-style-type:none }
#left,#body,#right {display:table-cell;}

Its really worked for me