CSS Layout issue. Need a fresh pair of eyes

Question

I've run into an issue where the thumbnail spacing in my image gallery is all over the place and I'm burnt out, lol.

Here are a few example pages of what it's supposed to look like across all pages that contain thumbnails: Good | Good | Good

However, on most of the album pages, they get crunched together, like this page for example: Bad

Then there's this page, where it seems to have completely gone kablooey: Really Bad

I'm sure I'm missing a margin or padding somewhere, but it's eluding me at the moment. Anyone able to sort this out?

thanks!

Answer 1

You should re-write the CSS to have all lis float either left or right with a margin to taste.

This will ensure that all elements will stay within the specified distance of each other and removes the need for positioning and tons of unique IDs when one class will solve the issue.

Don't forget to add a clearing element before you close the div ;)

CSS:

#wrap
{
    width: 450px;
    margin: 0 auto;
    border: 1px dashed #000;
}

.imageHolder
{
    float: left;
    width: 100px;
    margin: 5px;
    border: 1px dashed #00f;
}

.clear
{
    display: block;
    clear: both;
}
​

http://jsfiddle.net/Kyle_Sevenoaks/a6JGm/