I'm doing an eCommerce site for a client that sells personalised invitations. Some are vertical and some horizontal. Just to get an idea...

 

 

They want the borders to be the size whether they're horizontal or vertical images. So I decided to use table-cell to display the image in the center of the border. The problem comes when the description has text on more than one line and it pushes the product underneath it down.

 

 

I was going to use faux columns to make the length of every box the same no matter what but I'm struggling to figure out how that would work with table cell.

 

If anyone has any solutions how you could put four images on the same row with a border around it and center the image that would be great cheers.

 

Here's how my code currently looks.

 

HTML

<div class="bestSellerContainer">
	<div class="bestSellerImg"><img src="images/product1.jpg"></div>
	<div class="description">
		Minnie Mouse Birthday Invite<br/>
		<span class="red">Buy Now<br/>From only ??p</span>
	</div>	
</div>


<div class="bestSellerContainer">
	<div class="bestSellerImg"><img src="images/product2.jpg"></div>
	<div class="description">
		Minnie Mouse Birthday Invite<br/>
		<span class="red">Buy Now<br/>From only ??p</span>
	</div>
</div>

<div class="bestSellerContainer">
	<div class="bestSellerImg"><img src="images/product3.jpg"></div>
	<div class="description">
		Minnie Mouse Birthday Invite<br/>
		<span class="red">Buy Now<br/>From only ??p</span>
	</div>
</div>

<div class="bestSellerContainer">
	<div class="bestSellerImg"><img src="images/product4.jpg"></div>
	<div class="description">
		Minnie Mouse Birthday Invite<br/>
		<span class="red">Buy Now<br/>From only ??p</span>
	</div>
</div>

 

 

 

 

CSS

.bestSellerContainer {
	float: left;
	margin: 10px;
	text-align: center;
	font-size: 90%;
	display: table; 
}

.bestSellerImg {
	display: table-cell; 
	text-align: center;
	vertical-align: middle;
	width: 195px;
	height: 205px;
	border: 1px solid #bfbfbf;
}

.description {
	padding-top: 10px;
	width: 195px;
}

 

Thanks

Thanks, I've never seen that before, it looks really useful even if I can't use it on this project. It will still need display: table-cell; to align the images center so not sure if it will work or not but I'll give it a go.

I've made this tutorial describing how to get equal heights on floating elements it might be useful to you. Link to source code in the video description.

I used the display table cell to vertically align content on a regular basis. You can use Jquery to loop through the group of boxes you want to be equal heights and set the height property equal to the tallest element found. Using such a function will not interefere with your 'tables' put them in a wrapper and apply the jquery function to that while ensuring the height property of the table snd table cell is 100%.

Thanks for the replies, Niller I've been trying your solution and it was working in a standard HTML+ CSS version now trying to put it in the Wordpress version and can't seem to get it to work, any ideas what I'm doing wrong?

 

http://pukkainvites.bulletproofwebdesign.co.uk/product-category/anniversary-invites/?orderby=price-desc

Thanks

 

Edit: I seemed to have fixed it by taking display: table out of the class container .bestSellerContainer but it's still having kittens on the homepage but maybe I'm using the wrong HTML for it I'll have a look and try to fix it.

 

Also it seems to be adding a huge height to my heading tag when you inspect it with firebug.

 

<h2 style="height: 1122px;">Some of Our Best Sellers!</h2>

But when if I take out your JS it goes away so not sure what's causing that as it doesn't happen in your example,

 

2nd edit: fixed it all, thanks for the help guys.

Edited February 3, 201412 yr by j05hr