floating list items

[darrenb]

Hey,

I want to make a simple thumbnail gallery where it's three columns of thumbnails and when you click on it a new tab opens with the content.

I have the list set up so there's a float left on it but the very last item, for some reason, is in the center (so on the second column) and I want it to be on the left (first column). Why is it in the center and how do I get it to the left?

 

[ronaldroe]

Post a link or the code

 

[darrenb]

Html:

<div id="staff">
<ul>
<li><a href="jeff/index.html" target="_blank"><img src="images/jeff.jpg" alt="Jeff Batchelor"><span class="name">Jeff Batchelor &raquo;</span><span class="byline"></span></a><img class="pos1" src="#" alt="badge1"><img class="pos2" src="#" alt="badge2"><img class="pos3" src="#" alt="badge3"></li>
<li><a href="#"><img src="images/ally.jpg" alt="Ally Pintucci"><span class="name">Ally Pintucci &raquo;</span><span class="byline"></span></a><img class="pos1" src="#" alt="badge2"></li>
<li><a href="#"><img src="images/fares.jpg" alt="Fares El Sabbagh"><span class="name">Fares El Sabbagh &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/eugene.jpg" alt="Eugene A. Winer"><span class="name">Eugene A. Winer &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/amanda.jpg" alt="Amanda-Marie Quintino"><span class="name">Amanda-Marie Quintino &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/nicole1.jpg" alt="Nicole DiMarco"><span class="name">Nicole DiMarco &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/aneta.jpg" alt="Aneta Gurgul"><span class="name">Aneta Gurgul &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/trevor.jpg" alt="Trevor D'Orsay"><span class="name">Trevor D'Orsay &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/nick.jpg" alt="Nick Lalonde"><span class="name">Nick Lalonde &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/marie.jpg" alt="Marie Chevy"><span class="name">Marie Chevy &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/nicknank.jpg" alt="Nick Nankissoor"><span class="name">Nick Nankissoor &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/katie.jpg" alt="Katie Graf"><span class="name">Katie Graf &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/jay.jpg" alt="Jay Hamilton"><span class="name">Jay Hamilton &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/meraj.jpg" alt="Meraj Delavari"><span class="name">Meraj Delavari &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/jordanna.jpg" alt="Jordanna Grant"><span class="name">Jordanna Grant &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/brandon.jpg" alt="Brandon MacDonnell"><span class="name">Brandon MacDonnell &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/johnny.jpg" alt="Johnny De Lima"><span class="name">Johnny De Lima &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/julian.jpg" alt="Julian Rocco"><span class="name">Julian Rocco &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/kathryn.jpg" alt="Kathryn Dalziel"><span class="name">Kathryn Dalziel &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/arlene.jpg" alt="Arlene Dizon"><span class="name">Arlene Dizon &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/hunter.jpg" alt="Hunter Principi"><span class="name">Hunter Principi &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/kayla.jpg" alt="Kayla Quinn"><span class="name">Kayla Quinn &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/ryan.jpg" alt="Ryan Catley"><span class="name">Ryan Catley &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/ruth1.jpg" alt="Ruth Lockwood"><span class="name">Ruth Lockwood &raquo;</span><span class="byline"></span></a></li>
<li><a href="#"><img src="images/scott.jpg" alt="Scott Denis"><span class="name">Scott Denis &raquo;</span><span class="byline"></span></a></li>

</ul>
</div><!--#staff-->


CSS:
#staff {
width:710px;
border:1px solid #ff0000;
float:left;
}

#staff ul {
list-style:none;
margin:15px 0 0 0;
padding:0;
}

#staff ul li {
background:url(images/image-border.gif) no-repeat;
display:block;
float:left;
width:200px;
padding:0 32px 10px 0;
position:relative;
border:1px solid #ff0000;
}
#staff ul li img {
margin:6px 0 0 10px;
}





I noticed after pasting in a ton of items that every 25th item is acting up on me :S

 

[darrenb]

Also, I made the width of the div to 1000px just to see what happens and it made it 4 columns but the last image goes onto the 3rd column

 

[darrenb]

Ahhhh figured it out...I applied a height to the list item and boom it went all perfect I guess one of the images were a pixel over-height from the rest