Issue with Floats on my Index page

HTML & CSS
1

I’m trying to get my image thubnails on my index page to float left - 3 across at 300px width on my site: http://craigmurray.virb.com/work

Right now, there seems to be some odd glitch not allowing me to do this. The parent container for the index is 960px wide, so the math should work out giving me an even 30px margin between each thumbnail.

Here is what I have currently. Why doesn’t this get me 3 across?:

#index ul.thumbs li {
  width: 300px;
  height: 225px;
  margin: 0 30px 30px 0;
  float: left;
}

#index ul.thumbs li img {
  width: 300px;
}

Thanks for any insight/help to resolve.

2

Try validating yoir pages, remove all errors and only declare an ID once or make the ID into a CLASS

http://validator.w3.org/check?uri=http%3A%2F%2Fcraigmurray.virb.com%2Fwork&charset=(detect+automatically)&doctype=Inline&group=0

3

[FONT=Verdana]I think your problem lies here:

#index ul.thumbs li {
    float: left;
    height: 225px;
    margin: 0 30px 30px 0;
    width: 300px;
}

You’ve added 30px right margin to each of those items, so 3 x 330 = 990, which won’t fit.

As John says, validating your code would also be a good idea. :)[/FONT]