Problem lining up floated images

HTML & CSS
1

I’ve got an index of images that I am trying to line up in neat rows, but I am running into some issues.

The page is here: Game of Thrones: Characters

The relevant CSS is:


div.CharIndex {
border:medium solid #D89441;
float:left;
margin:2px 2px 30px 2px;
text-align:center;
width:150px;
}

div.CharIndexImage {
height:84px;
text-align:center;
width:150px;
}

div.CharIndexText {
background:url(http://www.westeros.org/Graphics/bg_enamel-gold.png);
font-size:14px;
text-align:center;
text-transform:uppercase;
width:150px;
}

In those cases where the name ends up taking up two lines, it ends up leaving no image immediately below that name. How can I fix that? Is it more of a margin it needs, or something else?

2

Following the advice on this page:

Inline-block Gallery | Layouts | HTML & CSS Workshop | Gary Turner Web Development

you could replace float: left on .CharIndex to display: inline-block;

Do note the necessary tweak for older IEs, if that matters to you.

3

Ah, thank you, that works much better!