Floating Divs in Image Gallery not within Div

Question

I am creating a property page template that is nested within the main website template. Within this template, I have created a div within a div for the Image Gallery I am going to create.There is a main image and then 5 thumbnails underneath and all of this is centered.
What seems to be occurring is that if I float all of my thumbnail divs "left" so that they are all on same line, then they are no longer within the Image Gallery div. If I take away the "float" attribute (as I did on thumbnail 1 for an example), it finally resides within the div, however, the other jump down to the next line below it...stacking one on top of the other.
I am getting so confused, though I have commented at the end of each div, but I am just not sure what is required here. Ran validator on Web Tools for both HTML and CSS, but I get nothing. Help!
Here is the link.
Thank you!
Samantha

Answer 1

Hi Samatha,
Try following:
Add a clear after your thumbnails as below:
<!--end infoImageThumb5--></div>
<br style="clear:both" />
And in your css add float left to all your thumbnails.
.profile #infoImageGallery #infoImageThumb1 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F;
    margin-bottom: 5px;
.profile #infoImageGallery #infoImageThumb2 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F;
.profile #infoImageGallery #infoImageThumb3 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F
.profile #infoImageGallery #infoImageThumb4 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F;
.profile #infoImageGallery #infoImageThumb5 {
    float: left;
    width: 95px;
    margin-right: 5px;
    height: 63px;
    background-color: #00F;
Regards,
Vinay