Problems with CSS Image Gallery
Posted: 25 June 2006 03:43 AM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2006-06-25

Hi all,

I’m putting a thumbnail gallery on my site using CSS like this:

#container .issue {
float: left;
width: 220px;
margin: 0 5px 0 0;
padding: 0 0 0 5px;
}

#container .issue .issuePicture {
height: 50px;
margin: 0;
padding: 0;
border: 1px solid #3B3B3B;
}

...with each thumbnail using HTML like this:

<div class=“issue”>
<div class=“issuePicture”>issues/sp06/media/sp06Thumb.jpg</div>
Spring 2006 ¦ Volume 103 Number 1
</div>

I like this approach, because it makes it very easy to add/subtract images wherever I’d like. However, there is a problem: this thumbnails are within a 930px container - with the margin and padding settings set in the .issue class above, there’s no way to make the thumbnails fit that 930px container exactly (there will always be extra space, either to the left or the right, thus unnecessarily pushing some thumbnails to new lines).

I guess my question is this: is there any way to modify this thumbnail gallery idea so that the thumbnails span the entire 930px, with the spacing between the thumbnails all being adequate?

Let me know if this isn’t clear. Thanks for your help.

Profile