Align thumbnails with equal spacing

Hi guys,

Im trying to horizontally align three thumbnail images with an equal line space between each thumb. The three images are contained with a 'thumbnail-container' class that is 760px wide.

The first thumbnail image aligns perfectly to the left of the container but the final image still has about 10px of blank space to the right of it. I've tried all different padding: and margin variations but I can get the images to align pefectly inside the container.

Please help me out guys!?!?!

See image...

The third thumb isn't aligned to the right of the container
 .thumbnails-container {
  width:760px;
 }

.thumbnails {
  margin-left: -20px;
  list-style: none;
  padding-right: 10px;
  *zoom: 1;
}

.thumbnails:before, .thumbnails:after {
  display: table;
  content: "";
}
.thumbnails:after {
  clear: both;
}
.thumbnails > li {
  float: left;
  margin: 0 0 18px 20px;
}
.thumbnails > li:last-child{
  padding-left: none;
}
.thumbnail {
  display: block;
  padding: 2px;
  line-height: 1;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}

a.thumbnail:hover {
  border-color: #dd4814;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.thumbnail .caption {
  padding: 9px;
}

Open in new window

rafique12Asked:
Who is Participating?
 
Julian HansenCommented:
Sorry dude I should have mentioned that I am doing this in Magento!

Not sure what that has to do with it - the solution remains the same - either you overwride the styles with a custom stylesheet or do it inline but basically you need to make provision for the padding and margins in the UL and the padding and borders around the images which is why a 50px margin won't work.

However, use it or not as you will - the code works as posted according to the requirement.
0
 
GaryCommented:
Add a right margin to the images
.thumbnail > img {
margin-right:50px;
....
}
after which target the last image to remove the margin

.thumbnail > img:last-child {
margin-right:0;
}

You should now have a 50px space between the images.
0
 
rafique12Author Commented:
Sorry no joy :-(

.thumbnail > img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right:50px;
}
.thumbnail > img:last-child {
margin-right:0;
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
GaryCommented:
Can you post your html
0
 
rafique12Author Commented:
Here:

<div class="thumbnails-container">
<ul class="thumbnails">
<li class="thumbnails">
<div class="thumbnail"><img src="http://placehold.it/220x220" alt="" /></div>
</li>
<li class="thumbnails">
<div class="thumbnail"><img src="http://placehold.it/220x220" alt="" /></div>
</li>
<li class="thumbnails">
<div class="thumbnail"><img src="http://placehold.it/220x220" alt="" /></div>
</li>
</ul>
</div>

Open in new window

0
 
Julian HansenCommented:
You are not taking into account padding and borders

Try this (i have substituted spans for images so replace those with your image)
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.thumbnails-container {
  width:760px;

}
.thumbnails {
  margin-left: -20px;
  list-style: none;
  padding-right: 10px;
  *zoom: 1;
}
.thumbnails > li {
  float: left;
}
.thumbnails li.middle {
   margin: 0 22px;
}
.thumbnail {
  display: block;
  padding: 2px;
  line-height: 1;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
a.thumbnail:hover {
  border-color: #dd4814;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
span {
	display: block;
	width: 220px;
	height: 220px;
	background: red;
}
</style>
</head>
<body>
<div class="thumbnails-container">
	<ul class="thumbnails">
		<li><a class="thumbnail"><span></span></a></li>
		<li class="middle"><a class="thumbnail"><span></span></a></li>
		<li><a class="thumbnail"><span></span></a></li>
	</ul>
</div>
</body>
</html>

Open in new window

0
 
GaryCommented:
I've amended the code slight since you had markup that you don't need - they can be targetted by the container.

<div class="thumbnails-container">
<ul class="thumbnails">
<li>
<img src="http://placehold.it/220x220" alt="" />
</li>
<li>
<img src="http://placehold.it/220x220" alt="" />
</li>
<li>
<img src="http://placehold.it/220x220" alt="" />
</li>
</ul>
</div>

<style>
 .thumbnails-container {
  width:760px;
 }
.thumbnails {
  list-style: none;
  margin:0;
  padding:0;
}
.thumbnails > li {
  display:inline-block;
  margin: 0 43px 18px 0;
  padding:0;
}
.thumbnails > li:last-child{
  margin-right:0;
}
.thumbnails li img {
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
.thumbnails li img:hover {
  border-color: #dd4814;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.thumbnail .caption {
  padding: 9px;
}
</style>
0
 
Julian HansenCommented:
To expand on my earlier post.

You also did not disable the ul padding and margins - updated code below
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.thumbnails-container {
  width:760px;
}
.thumbnails {
  list-style: none;
  *zoom: 1;
  magin: 0;
  padding: 0;
}
.thumbnails > li {
  float: left;
}
.thumbnails li.middle {
   margin: 0 41px;
}
.thumbnail {
  display: block;
  padding: 2px;
  line-height: 1;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
a.thumbnail:hover {
  border-color: #dd4814;
  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
span {
	display: block;
	width: 220px;
	height: 220px;
	background: red;
}
</style>
</head>
<body>
<div class="thumbnails-container">
	<ul class="thumbnails">
		<li><a class="thumbnail"><span></span></a></li>
		<li class="middle"><a class="thumbnail"><span></span></a></li>
		<li><a class="thumbnail"><span></span></a></li>
	</ul>
</div>
</body>
</html>

Open in new window

0
 
rafique12Author Commented:
Sorry dude I should have mentioned that I am doing this in Magento!
0
 
GaryCommented:
Shouldn't make any difference, is this the More Views on the product detail page under the main image?
0
 
Chris StanyonCommented:
Just do this with this with the img, unless you absolutely need the extra DIVs and ULs

//HTML
<div class=".thumbnails-container">
   <img src="http://placehold.it/220x220" alt="" class="first" />
   <img src="http://placehold.it/220x220" alt="" />
   <img src="http://placehold.it/220x220" alt="" class="last" />
</div>

//CSS
.thumbnails-container { width:760px; overflow:hidden; }
.thumbnails-container img { display:block; width:220px; margin:0px 25px; float:left; }
.thumbnails-container img.first { margin-left: 0px; }
.thumbnails-container img.last { margin-right:0px; }

Open in new window

0
 
Chris StanyonCommented:
PS: My styling above doesn't take into account any padding or borders on the img - recalculate if needed :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.