Jquery Equal Height

by Ketan Patel

HTML

<div>
<div class="product">Lorem ipsum dolor sit amet</div>
</div>
<div>
<div class="product blue">Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
</div>
<div>
<div class="product">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
</div>
<div>
<div class="product blue">Lorem </div></div>

CSS

.product{
    background-color:red;
    width:23%;
    float:left;
    padding:1%;
}
.blue{
    background-color:blue;
}

JavaScript

$.fn.equalHeights = function(){
	var max_height = 0;
	$(this).each(function(){
		max_height = Math.max($(this).height(), max_height);
	});
	$(this).each(function(){
		$(this).height(max_height);
	});
};

$(document).ready(function(){
    $('.product').equalHeights();
});