The reason why your images with descriptions are breaking is because they are block elements. Because your containing DIV and your description DIV on the first image are block elements, they expand the width of the screen and cause the remaining images to move below it.
There are a few ways to fix this, but the easiest would be to turn your A elements surrounding your images into block elements themselves, and floating them left. Therefore, the following code should fix your problems:
Code:
.livethumbnail
{
display: block;
float:left;
}
.footer
{
font-size: 11px;
text-align: center;
color: #ccc;
clear: both;
}
Also, I see you want the descriptions available when you hover over them. This is fairly easy using css, especially inside of an A element (which makes it IE friendly). Again, the following code should add this functionality:
Code:
.livethumbnail .caption {
color: white;
display: block;
}
a.livethumbnail:hover .caption {
display: block;
}
a.livethumbnail:visited:hover .caption {
display: block;
}
Good luck with the gallery.