List in columns issue

Hey guys,

Can anyone tell me why the photos on this page are not positioning properly? I am using a list to get them into columns but for some reason nothing is going into the 1st and 2nd columns in the 2nd row.

http://www.reelracing.tv/barrymore/gallery.html

Here is the html:

<ul id="gallery">
<li><img src="gallery/thumbs/BBC_01_small.jpg" /></li>
<li><img src="gallery/thumbs/BBC_02_small.jpg" /></li>
<li><img src="gallery/thumbs/BBC_03_small.jpg" /></li>
<li><img src="gallery/thumbs/BBC_04_small.jpg" /></li>
<li><img src="gallery/thumbs/BBC_05_small.jpg" /></li>
<li><img src="gallery/thumbs/BBC_06_small.jpg" /></li>
<li><img src="gallery/thumbs/BBC_07_small.jpg" /></li>
<li><img src="gallery/thumbs/BBC_08_small.jpg" /></li>
</ul>

Code (markup):

And here is the CSS:

ul#gallery {
	float:left;
	width:750px;
	margin:10px 0 0 0;
	padding:0;
	list-style:none;
	text-align:center;
	}

ul#gallery li {
	float:left;
	width:250px;
	margin:0 0 10px 0;
	padding:0;
	}

ul#gallery li img {
	border:solid 5px #A2DCF9;
	}

Code (markup):

 

simple - you aren't stating the sizes of your images... the first two floating images are 134px tall, the last one in the row is 133px which means it isn't pushing the 'float' down enough for it to clear to the left.

When using that float technique, you either need to make sure the images are all the EXACT same size, or that the container around them are all the same size.

My advice? Axe the 10px bottom margin and instead declare a height on the LI's of 154px (134 for the image, 10 to fake the bottom margin, 10 for the 5px top/bottom border) - that should give you some flexibility on the image sizes being off a pixel or two.

 

Thanks deathshadow. I trimmed 1px off the bottom of the second image (the only one that was 134px high) and everything fell in to place now.