How do I evenly space out my thumbnails?: CSS, HTML, image gallery, margin

by: LZ1Posted on 2009-10-13 at 07:52:18ID: 25560580

You could place a div in between each thumbnail with a specified width. It's a little on the code heavy side as it's adding additional lines to yoru code, however I've used it before and it's worked great.

by: furio13Posted on 2009-10-13 at 08:07:19ID: 25560782

Thanks for the reply LZ1.

However, I think your suggestion is probably as much work as my method where I add a class to the thumbnails on the far right. As I change the thumbnails, I will always have to make sure the extra divs are in the right spot. And yeah, I was hoping to avoid the extra mark-up.

Thanks for the help though. If anyone else has any suggestions, I'm still open to anything.

by: KravimirPosted on 2009-10-13 at 10:36:05ID: 25562224

It sounds like they're left aligned. Have you considered centering them?

by: furio13Posted on 2009-10-13 at 10:41:55ID: 25562278

Sorry, I guess I should have provided more details.

Right now, I have all my thumbnails in an unordered list and each <li> is floating "left" with a margin-right of 20px (except on the far right thumbnail).

by: qaljimmyPosted on 2009-10-16 at 06:37:18ID: 25589360

Make sure the <li> elements are styled with "display:block; overflow:hidden; float:left; clear:none;"
Also take account of the box-model (margin+padding+border= total width of element)
If you have border set to the elements, substract it from the margin or the padding;

by: furio13Posted on 2009-10-16 at 06:50:22ID: 25589483

Thanks for the reply qaljimmy.

I believe I have already taken most of those things into consideration. The problem is using "margin-right" with the thumbnails to space them out but have the far right thumbnail butt-up on the right side with the edge of the container.

Right now, the "margin-right" on the far right thumbnail is causing the thumbnail to move to the next line.

by: qaljimmyPosted on 2009-10-16 at 07:03:58ID: 25589647

Might be a long shot, but does this problem only appear in IE?

by: KravimirPosted on 2009-10-16 at 07:20:57ID: 25589810

Have you considered reducing the right margin by half and adding a left margin of that new amount?

by: furio13Posted on 2009-10-16 at 07:25:51ID: 25589845

Thanks for the replies guys.

qaljimmy:
No, its happening on any browser I'm using (I mainly use Firefox 3)

Kravimir:
I thought about that too but then I would have 10px margin left on the far left thumb and 10px margin right on the far right thumb. I was hoping to have the edges of the thumbs on either side lined up with the edge of the container without spaces.

by: KravimirPosted on 2009-10-16 at 07:39:45ID: 25589970

Oh, right. I forgot you mentioned that detail. Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">/* <![CDATA[ */
 
div.container {
  width: 940px;
  background: #D1D1D1;
  padding: 20px 0;
  overflow: hidden; /* to contain the floats */
}
 
ul.thumnails {
  margin: 0 -10px;
  padding: 0;
  list-style-type: none;
  position: relative;
  width: 960px;
}
 
ul.thumnails li {
  width: 220px;
  float: left;
  margin: 0 10px;
  display: inline; /* IE6 fix */
  background: #7A7A7A;
}
 
/* ]]> */</style>
</head>
<body>
 
 
<div class="container">
 
<ul class="thumnails">
  <li>Thumbnail</li>
  <li>Thumbnail</li>
  <li>Thumbnail</li>
  <li>Thumbnail</li>
</ul>
 
 
</div>
 
 
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:

Select all Open in new window

by: qaljimmyPosted on 2009-10-16 at 07:52:22ID: 25590100

Even simpler approach

<style>
 
.container {list-style-type:none; margin:10px auto; padding:50px 0px; width:940px; background-color:#ccc; display:block; overflow:hidden;}
.container .thumb {list-style-type:none; padding:0px; margin:0px 20px 0px 0px; float:left; width:220px; height:150px; display:block; overflow:hidden; background-color:#999; }
.container .last {margin-right:0px;}
</style>
<ul class="container">
	<li class="thumb">Thumbnail</li>
	<li class="thumb">Thumbnail</li>
	<li class="thumb">Thumbnail</li>
	<li class="thumb last">Thumbnail</li>
</ul>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

Select all Open in new window

by: KravimirPosted on 2009-10-16 at 07:56:44ID: 25590147

> Even simpler approach

True. Since the container has a fixed width and the thumbnails are fixed width, it's easy to tell which one will be the last on a row.

by: furio13Posted on 2009-10-16 at 08:34:47ID: 25590502

Thanks again for the reply guys.

Kravimir:
I'm going to give your suggestion a try and I'll let you know how it goes.

qaljimmy:
I appreciate the help but as I mentioned in my question, I wanted to avoid using a different class for the far right thumbnail. I am using some Jquery to categorize my thumbnails so when someone selects a particular category, some of the thumbnails are removed from the list. Because of this, the far right thumbnail won't always be the same.

by: qaljimmyPosted on 2009-10-16 at 15:58:05ID: 25593949

In that case, using jQuery after you remove the thumbnails you don't want, you can also generate an additional class name for the last element in the thumbnail array/object. Thus able to use custom CSS property.

by: furio13Posted on 2009-11-03 at 13:29:15ID: 31640535

Thanks.

Question

How do I evenly space out my thumbnails?

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

CSS

HTML

image gallery

margin

Cascading Style Sheets (CSS)

Hypertext Markup Language (HTML)

Web Images

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press