Creating equal height columns with CSS is not as easy as it may first seem. Elixon FixHeight is a solution that works in all common web browsers.

Elixon FixHeight makes all floating blocks on the same row be the same height. In addition to this Elixon FixHeight adds class names containing row and column ordinal numbers to each floating block.

Usage

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.fixheight.min.js"></script>

<div class="myListing">
	<div><h3>#1</h3><p>Lorem ipsum dolor sit amet much much much longer. </p></div>
	<div><h3>#2</h3><p>Lorem ipsum dolor sit amet </p></div>
	<div><h3>#3</h3><p>Lorem ipsum</p></div>
	<div><h3>#4</h3><p>Lorem ipsum</p></div>
	<div><h3>#5</h3><p>Lorem ipsum dolor sit amet much much much longer.</p></div>
	<div><h3>#6</h3><p>Lorem ipsum dolor sit amet </p></div>
	<div><h3>#7</h3><p>Lorem ipsum dolor much longer</p></div>
</div>
<script type="text/javascript">$('.myListing').fixHeight();</script>