Issues with image gallery floating

I have my site set up so that the background of the main div is split into 3 parts- a top imagacontaing the header, a middle image which tiles vertically until there is no more content, and a bottom image which is a gradient fading out. It gives a really nice effect and it was working perfectly until I tried to make an image gallery. As soon as I tell my thumbnail divs to float left, they become disconnected from their container div (the tiling middle image no longer tiles). Does this have something to do with the page flow (like with positioning)? I cant figure out a good workaround. Here is the code, thank you in advance:

HTML

<div id="main">
   <div class="picThumb">
     <img src="images/somePic.jpg""></img>
   </div>
</div>

CSS

#main
{
     background-image:url(images/mainBoxMid.png);
     background-position:center;
     background-repeat:repeat-y;
     width:700px;
     margin:0 auto;
 
     padding:15px 70px;  
}
 
.picThumb 
{
    width:200px;
    height:200px;
    float:left;
    margin: 15px;
 
 
    border: 1px dotted;
}