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:

Code:
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?