Question

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 for 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.

Answer 1

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 $.