How do I…

Right… I have a Gallery section with 3 thumbnails on the left ie: div id=”gallerySmallLeft” and the remaining at the bottem ie: div id=”gallerySmallBottom”

There is a box kinda in the center that when a thumbnail is clicked it opens the larger image in the box.

So, my problem is this… I have the galleryMain div but when the images from gallerySmallBottom div exceed X amount, it overlaps the galleryMain at the bottom.

How do I rectify that?

[CODE]

#galleryMain {
width: 950px;
border: 1px solid #000000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 21px;
padding-left: 0px;

background-image: url(layout/gallery background/grey-to-white.gif);
background-repeat: repeat-x;
background-position: top;
}

#galleryBoxFrame {
border: 1px solid #000000;
width: 766px;
float: right;
height: 579px;
background-color: #FFFFFF;
margin-right: 21px;
margin-left: 21px;
}

#gallerySmallLeft {
width: 120px;
float: left;
margin-left: 20px;
height: 579px;
}
#gallerySmallBottom {
height: 201px;
width: 950px;
clear: both;
}
#gallerySmallBottom img {
float: none;
padding-top: 21px;
padding-right: 10.5px;
padding-bottom: 0px;
padding-left: 10.5px;
}

[/CODE]

[CODE]

<div id=”galleryMain”>

<h3>
Title:
</h3>

<iframe id=”galleryBoxFrame” name=”content” frameborder=”0″ scrolling=”auto”><center></center></iframe>

<div id=”gallerySmallLeft”>

images

</div>

<div id=”gallerySmallBottom”>

images

</div>

[/CODE]

Urgent!!!

?

Also in #CSS _↴