Equal Height Columns

Side-by-side DIVs of equal height, dependent if on same row. Resizes on the fly.

by Jon Fuller

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="container products-section">
	<div class="row product-list">
		<div class="product-list-item">
			<div>img</div>
			<h2><a href="#0">Title</a></h2>
			<div>text</div>
			<a href="#0">See products</a>
		</div>
		<div class="product-list-item">
			<div>img</div>
			<h2><a href="#0">Title</a></h2>
			<div>Lorem ipsum dolor sit amet, qui te doming voluptatum consectetuer, nam detracto principes cu. Mei an ullum accommodare, pro malorum luptatum te. At delenit albucius persequeris eum, ut cetero democritum sea. Zril quidam aperiam et quo, facer mnesarchum moderatius per eu.
			In quo dolores oportere, te eos duis nulla maiorum. Eu lorem latine laboramus mei. Ea periculis referrentur mea. Eu tale molestie liberavisse vim, id nam dolore corpora singulis. Etiam instructior vis in. Ut velit efficiendi vix, mel ea purto illud deterruisset.</div>
			<a href="#0">See products</a>
		</div>
		<div class="product-list-item">
			<div>img</div>
			<h2><a href="#0">Title</a></h2>
			<div>Lorem ipsum dolor sit amet, qui te doming voluptatum consectetuer, nam detracto principes cu. Mei an ullum accommodare, pro malorum luptatum te. At del</div>
			<a href="#0">See products</a>
		</div>
		<div class="product-list-item">
			<div>img</div>
			<h2><a href="#0">Title</a></h2>
			<div>Lorem ipsum dolor sit amet, qui te doming vollud deterruisset.</div>
			<a href="#0">See products</a>
		</div>
	</div>
</div>

CSS

.product-list-item {
	display: inline-block;
	text-align: center; 
	width: 40%; 
	background: red;
	vertical-align: top;
	margin: 4%;
}

JavaScript

// make each list item block be the same height, regardless of content in each one
equalheight = function(container){

	var currentTallest = 0,
		currentRowStart = 0,
		rowDivs = new Array(),
		the_el,
		topPosition = 0;
	jQuery(container).each(function() {

		the_el = jQuery(this);
		jQuery(the_el).height('auto')
		topPostion = the_el.position().top;

		if (currentRowStart != topPostion) {
			for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
				rowDivs[currentDiv].height(currentTallest);
			}
			rowDivs.length = 0; // empty the array
			currentRowStart = topPostion;
			currentTallest = the_el.height();
			rowDivs.push(the_el);
		} else {
			rowDivs.push(the_el);
			currentTallest = (currentTallest < the_el.height()) ? (the_el.height()) : (currentTallest);
		}
		for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
			rowDivs[currentDiv].height(currentTallest);
		}
	});
}

jQuery(window).ready(function() {
	equalheight('.product-list .product-list-item');
});

jQuery(window).resize(function(){
	equalheight('.product-list .product-list-item');
});