Div Product clearfix height

generaltradeOct 9, 2017

Hi,
i have a need... on the page product i wonder if it's possible to have all the div of the same height... Unfortunately not always the content of the div is the same, and so the height of each element "<div class="product clearfix>" is different...
I have attached a picture that show the problem..

Following part of the code

Best regards

Gianfranco

<div id="shop" class="shop grid-container clearfix" data-layout="fitRows">

					&lt;div class="product clearfix " style="border: 1px solid  rgba(203,203,203,1.00); padding: 5px; margin: 10px;"&gt;
						&lt;div class="product-image"&gt;
							[

](http://www.happycasastore.it/2018/scheda-articolo/Bilancia-professionale/15393)

</div>
<div class="product-desc">
<div class="product-title"><h3>BILANCIA PROFESSIONALE</h3></div>

</div>
</div>

					&lt;div class="product clearfix " style="border: 1px solid  rgba(203,203,203,1.00); padding: 5px; margin: 10px;"&gt;
						&lt;div class="product-image"&gt;
							[

](http://www.happycasastore.it/2018/scheda-articolo/Tubo-sostegno/15295)

</div>
<div class="product-desc">
<div class="product-title"><h3>TUBO SOSTEGNO</h3></div>

� 2,2cm l 140-260cm<br>
</div>
</div>

				&lt;/div&gt;&lt;!-- #shop end --&gt;

generaltradeOct 12, 2017

There's any solution to this?
I'll try to explain it better...
I need that all the “<div class=”product clearfix>” elements in a row have the same height (in other words, the height of the div with the max height)

SemiColonWebSTAFFOct 21, 2017

Hello,

Thanks for your Patience!

This is Definitely Possible with slight customization! Consider using the following code:

<div class="row common-height grid-container">

	<div class="col-md-3">
		<div class="product iproduct clearfix" style="border: 1px solid rgba(203,203,203,1.00); padding: 5px; height: 100%;">
			<div class="product-image">
				<a href="#"><img src="images/shop/dress/1.jpg" alt="Checked Short Dress" /></a>
				<a href="#"><img src="images/shop/dress/1-1.jpg" alt="Checked Short Dress" /></a>
				<div class="sale-flash">50% Off*</div>
				<div class="product-overlay">
					<a href="#"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a>
					<a href="include/ajax/shop-item.html"><i class="icon-zoom-in2"></i><span> Quick View</span></a>
				</div>
			</div>
			<div class="product-desc center">
				<div class="product-title"><h3><a href="#">Checked Short Dress</a></h3></div>
				<div class="product-price"><del>$24.99</del> <ins>$12.49</ins></div>
				<div class="product-rating">
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star-half-full"></i>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-3">
		<div class="product iproduct clearfix" style="border: 1px solid rgba(203,203,203,1.00); padding: 5px; height: 100%;">
			<div class="product-image">
				<a href="#"><img src="images/shop/dress/1.jpg" alt="Checked Short Dress" /></a>
				<a href="#"><img src="images/shop/dress/1-1.jpg" alt="Checked Short Dress" /></a>
				<div class="sale-flash">50% Off*</div>
				<div class="product-overlay">
					<a href="#"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a>
					<a href="include/ajax/shop-item.html"><i class="icon-zoom-in2"></i><span> Quick View</span></a>
				</div>
			</div>
			<div class="product-desc center">
				<div class="product-title"><h3><a href="#">Checked Short Dress</a></h3></div>
				<div class="product-price"><del>$24.99</del> <ins>$12.49</ins></div>
				<div class="product-rating">
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star-half-full"></i>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-3">
		<div class="product iproduct clearfix" style="border: 1px solid rgba(203,203,203,1.00); padding: 5px; height: 100%;">
			<div class="product-image">
				<a href="#"><img src="images/shop/dress/1.jpg" alt="Checked Short Dress" /></a>
				<a href="#"><img src="images/shop/dress/1-1.jpg" alt="Checked Short Dress" /></a>
				<div class="sale-flash">50% Off*</div>
				<div class="product-overlay">
					<a href="#"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a>
					<a href="include/ajax/shop-item.html"><i class="icon-zoom-in2"></i><span> Quick View</span></a>
				</div>
			</div>
			<div class="product-desc center">
				<div class="product-title"><h3><a href="#">Checked Short Dress</a></h3></div>
				<div class="product-price"><del>$24.99</del> <ins>$12.49</ins></div>
				<div class="product-rating">
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star-half-full"></i>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-3">
		<div class="product iproduct clearfix" style="border: 1px solid rgba(203,203,203,1.00); padding: 5px; height: 100%;">
			<div class="product-image">
				<a href="#"><img src="images/shop/dress/1.jpg" alt="Checked Short Dress" /></a>
				<a href="#"><img src="images/shop/dress/1-1.jpg" alt="Checked Short Dress" /></a>
				<div class="sale-flash">50% Off*</div>
				<div class="product-overlay">
					<a href="#"><i class="icon-shopping-cart"></i><span> Add to Cart</span></a>
					<a href="include/ajax/shop-item.html"><i class="icon-zoom-in2"></i><span> Quick View</span></a>
				</div>
			</div>
			<div class="product-desc center">
				<div class="product-title"><h3><a href="#">Checked Short Dress</a></h3></div>
				<div class="product-price"><del>$24.99</del> <ins>$12.49</ins></div>
				<div class="product-rating">
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star3"></i>
					<i class="icon-star-half-full"></i>
				</div>
			</div>
		</div>
	</div>

</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.