Jquery Equal Height

by tinyhustlee

HTML

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

CSS

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

JavaScript

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

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