How can I apply equal heights to floating DIVs in this case?

I am dynamically parsing DIVs which are floating left to each other in two columns. The problem now that if any DIV has more content/height than the other, the page looks messy because there's no clearing 开发者_如何学Gofor the floats.

I am asking how can I make all DIVs have the same height? (All DIVS have a specific class like this .cat-widget) I just want them to be same-height to float without problem and line-up perfectly on page.

Any suggestions, best practice to do this please let me know.

This solution works wonderfully:

<div style='display:table'>
  <div style='display:table-row'>
    <div style='display:table-cell'>..content..</div>
    <div style='display:table-cell'>..content..</div>
  </div>
</div>

UPDATE

Working example here and tutorial here. Just tested working in FF 3.6, IE8, Chrome 7, and Safari $.

This question useful? Both columns same height as deepest column?

A Javascript solution you could fall back on is:

// get both heights
var heightFirst   = document.getElementById('....').offsetHeight;
var heightSecond  = document.getElementById('....').offsetHeight;

// find largest
var maxHeight = Math.max(heightFirst, heightSecond);

// set both to largest
document.getElementById('....').style.height = maxHeight + 'px';
document.getElementById('....').style.height = maxHeight + 'px';

There are also a few CSS solutions detailed here: http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

apply height and overflow:hidden to to all divs

I actually use, when needed:

<div class="somename" style="min-height: 300px;">