Fluid column problem

Question

I'm new to CSS but have opted to go for a 2 col fluid site.
One page is causing the background to repeat - I've made it "no-repeat" so now just have a black bg at the bottom.
I believe the thumbnails are pushing the page down but I don't know how to sort it out.
CSS & HTML code below.
Many thanks for any advice.
Paul
        COLUMNS
#col1
    float: left;
    margin-left:8%;
    margin-right:1%;
    margin-top:25px;
    border-top:1px solid #999999;
    padding-top:10px;
    width:35%;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:17px;
    color:#333333;
#col2
    float:left;
    margin-left:1%;
    width: 45%;
    margin-top:25px;
    border-top:1px solid #999999;
    padding-top:10px;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:18px;
    color:#333333;
    text-align:center;
        FOOTER
#footer
    width:50%;
    float:left;
    margin-left:8%;
    margin-right:2%;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:16px;
    text-align:left;
    color:#ffffff;
    margin-top:20px;
#subfooter
    width:32%;
    float:right;
    margin-left:1%;
    margin-right:1%;
    font-family:Garamond, "Palatino Linotype", Georgia;
    font-size:12px;
    text-align:center;
    color:#ffffff;
    margin-top:20px;
        DYNAMIC DRIVE images
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
float:right;
.thumbnail:hover{
background-color: transparent;
.thumbnail:hover img{
border: 1px solid #AFB3B4;
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
border: 2px solid #AFB3B4;
visibility: hidden;
color: black;
text-decoration: none;
margin-top:175px;
margin-left:2px;
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 0px; /*position where enlarged image should offset horizontally */
z-index: 50;
</style>
HTML
<div id="col1">
<p><span class="style10">A well trained dog brings so much more enjoyment to the owner than one who constantly pulls on the lead or who refuses to return when let off it.<br>
  <p>While an obediant dog doesn't "just happen", there is no purpose in giving timelines for this stage or that. Every dog is different.</p>
  I always train on a "one to one" basis and the training is tailored to suit your needs. Training is structered and will require time and commitment from and you.
  <p><strong>But the results are well worth your hard work.</strong></p>All training ??etc etc etc TO CONTINUE...<br>
  The early training commences the better - even a young puppy can be taught basic manners! <br><br>
  Having been surrounded by a variety of breeds as diverse as Rottweilers and Border Terriers, my love of dogs has, over the past 25 years,
  introduced me to all types of issues. <br>
  <br>
  This experiance I have gained has proven invaluable to many owners and their dogs - from the smallest puppy requiring basic training to an Akita with a real attitude problem.
  <p><strong><a href="Training.htm">Training</a></strong> and correcting <strong><a href="Behaviour.htm">behaviour</a></strong> is carried out on a "one to one" basis. Just me and you - and your dog!</p>
  <p>This personal service is retained for <strong><a href="Boarding.htm">boarding</a>.</strong> No draughty kennels for my guests, but the warmth and security of my own home. One of the family!
  And I mean personal. Never any more than two dogs at a time.</p>
  </span></p></div>
<div id="col2"><br>
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="images/JANET1.jpg" width="250px" height="165px" border="0" /><span><img src="images/JANET1a.jpg" /><br />She's the one!</span></a>
<a class="thumbnail" href="#thumb"><img src="images/PUPPIES1.jpg"  width="250px" height="165px" border="0" /><span><img src="images/PUPPIES1a.jpg" /><br />Do you think they've seen us?</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="images/SLEEPIN1.jpg" width="250px" height="165px" border="0" /><span><img src="images/SLEEPIN1a.jpg" /><br />ZZZzzzzZZZZZZzzzzz....</span></a>
<a class="thumbnail" href="#thumb"><img src="images/FRAN1.jpg"    width="250px" height="165px"  border="0" /><span><img src="images/FRAN1a.jpg"/><br />Have you got my left profile?</span></a>
<br />
<a class="thumbnail" href="#thumb"><img src="images/JANET1.jpg" width="250px" height="165px" border="0" /><span><img src="images/JANET1a.jpg" /><br />She's the one!</span></a>
<a class="thumbnail" href="#thumb"><img src="images/PUPPIES1.jpg"  width="250px" height="165px" border="0" /><span><img src="images/PUPPIES1a.jpg" /><br />Do you think they've seen us?</span></a>
</div>
</div>
<div id="footer">Bolton <strong>&middot;</strong> Appleby in Westmorland <strong>&middot; </strong>Cumbria <strong>&middot; ;</strong><strong>&middot;</strong> </div>
<div id="subfooter">&copy; The Magic 6 2010</div>
</body>
</html>

Answer 1

Hi Paul,
I could not reproduce the black bottom background with your source code. What I could see is this (Both images refer to the same line, I only was cutting them because of the Adobe width upload limit. You could them put together again :-))):
and:
Perhaps it's possible that you tell me the link to this page. If not already done, load the page on your server, no matter whether you are satisfied with it or not.
In any case, I recommend Nancy O. 's self-explanatory templates on this issue. Here is one of the links:
http://alt-web.com/Image-slices-in-a-CSS-based-layout.html
Dont fear this comment: "The page you seek cannot be found, but countless more exist..." and look at the right side "Free templates aso...
Hans-G.