Can't get images to align themselves in row properly

<a class="profile_link" href=""> 
   <div class="thumb_container">
     <img class="thumb_image" src="" alt="thumb"/> 
     <span class="model_names">name</span>
   </div>
</a>

a.profile_link{
color: black;
outline: none;
text-decoration: none;
}

.thumb_container{
float:left;
padding-left: 9px;
padding-right: 9px;
padding-bottom: 10px;

}


img.thumb_image{
display: block;

}


.m开发者_运维技巧odel_names{
font-size: 12px;
text-align: center;
}

This code kinda of gives me what I want but not quite. So I have these links looped, which contain a thumb and a model name centered right below it. I want these thumbs and names to be dynamically placed in rows and when there is not enough room it will create another row. It is doing it right now but sometimes gets buggy and skips a row... it's just a mess. Keep in mind, the thumbs can be different sizes; I don't mind gaps at the end of rows if there isn't enough room.

There is also a main container div I didnt paste which just has the dimensions of 800px width.

Maybe someone has a better and cleaner way of approaching this layout.

---

I think the problem is caused by your floated div being placed inside a non-floated a. Whilst this will float the div, the effect is negated because the a is an inline element.

Try adding the .thumb_container style declarations to the a element.

BTW, this is always going to have potential to look ugly if you're using thumbnails of different sizes. You could also try setting a specific width and height to the containing div and setting overflow to hidden. You will need to move your span outside of div.thumb_container, but that shouldn't be a problem. You could then use some CSS and/or JS effect to show the full thumbnail on hover.