Your diagnosis of the clear clearing the menu is correct. What is needed is a way to clear the floats only within the right column. Probably the easiest way to do this is to firstly reinstate the #content div on this page and enclose groups of the floated divs within a "gallery" class div, which has its overflow property set to effect float clearing. (so we use a .gallery class and get rid of the #gallery id).
I had a play around with it, and had to change a few other margins to paddings and other minor things elsewhere in the css to keep IE happy, but it works between pages.
So the html for the gallery part is <!--navigation-->
<div id="content">
<p>Please click on the thumbnails below to see larger image of my pictures.</p>
<div class="gallery">
<div> <a href="#" onclick="javascript:newwindow=window.open('sheep-bum.jpg','name','height=600,width=600'); return false"> <img src="sheep-bum.jpg" alt="Painting on canvas" width="120" height="149" /><br />
Sheep Bum</a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('pig-bum.jpg','name','height=600,width=600'); return false"> <img src="pig-bum.jpg" alt="Painting on canvas" width="120" height="149" /><br />
Pig Bum</a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('monkey.jpg','name','height=600,width=600'); return false"> <img src="monkey.jpg" alt="Painting on canvas" width="120" height="151" /><br />
Monkey</a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('lion.jpg','name','height=600,width=600'); return false"> <img src="lion.jpg" alt="Painting on canvas" width="120" height="150" /><br />
Lion</a> </div>
</div>
<p> <a href="#" onclick="javascript:newwindow=window.open('lionside.gif','name','height=600,width=600'); return false"> <img src="lionside.gif" alt="Painting on canvas" width="150" height="188" align="right" hspace="10" style="border:0" /></a> All paintings are done on 38mm deep canvas and I paint right around the side so that the paintings can be hung straight on the wall. An example is shown to the right (<a href="#" onclick="javascript:newwindow=window.open('lionside.gif','name','height=600,width=600'); return false" class="normal">click to enlarge</a>) </p>
<p>These are examples of designs currently on sale – however I am able to paint a picture on ANY subject in ANY size and depth canvas. If you have a particular character that you would like or a scheme to complement please contact me to discuss your requirements.</p>
<p style="margin-bottom:0px">I am also available to paint murals in the Birmingham area. Please <a href="contact.php" class="normal">contact</a> me to discuss this further.</p>
<div class="gallery">
<div> <a href="#" onclick="javascript:newwindow=window.open('alien.jpg','name','height=600,width=600'); return false"> <img src="alien.jpg" alt="Painting on canvas" width="120" height="173" /> <br />
Alien </a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('alien2.jpg','name','height=600,width=600'); return false"> <img src="alien2.jpg" alt="Painting on canvas" width="120" height="173" /> <br />
Alien 2 </a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('fish.jpg','name','height=600,width=600'); return false"> <img src="fish.jpg" alt="Painting on canvas" width="120" height="173" /> <br />
Fish </a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('tortoises.jpg','name','height=600,width=600'); return false"> <img src="tortoises.jpg" alt="Painting on canvas" width="120" height="173" /> <br />
Tortoises </a> </div>
<div style="margin-right:15px"> <a href="#" onclick="javascript:newwindow=window.open('jungle.jpg','name','height=600,width=600'); return false"> <img src="jungle.jpg" alt="Painting on canvas" width="240" height="190" /> <br />
Jungle </a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('cow-face.jpg','name','height=600,width=600'); return false"> <img src="cow-face.jpg" alt="Painting on canvas" width="120" height="147" /> <br />
Cow Face </a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('cow-bum.jpg','name','height=600,width=600'); return false"> <img src="cow-bum.jpg" alt="Painting on canvas" width="120" height="148" /> <br />
Cow Bum </a> </div>
</div>
<div class="gallery">
<div> <a href="#" onclick="javascript:newwindow=window.open('3-bums.jpg','name','height=600,width=1100'); return false"> <img src="3-bums.jpg" alt="Painting on canvas" width="510" height="157" /> <br />
3 Bums </a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('want-to-be-a-cloud.jpg','name','height=600,width=600'); return false"> <img src="want-to-be-a-cloud.jpg" alt="Painting on canvas" width="120" height="150" /> <br />
Want to be a cloud </a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('djing.jpg','name','height=600,width=600'); return false"> <img src="djing.jpg" alt="Painting on canvas" width="120" height="150" /> <br />
DJing </a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('fairy.jpg','name','height=600,width=600'); return false"> <img src="fairy.jpg" alt="Painting on canvas" width="120" height="145" /> <br />
Fairy </a> </div>
<div> <a href="#" onclick="javascript:newwindow=window.open('giraffe.jpg','name','height=600,width=600'); return false"> <img src="giraffe.jpg" alt="Painting on canvas" width="120" height="155" /> <br />
Giraffe </a> </div>
</div>
<div class="gallery">
<div> <a href="#" onclick="javascript:newwindow=window.open('giraffex3.jpg','name','height=750,width=600'); return false"> <img src="giraffex3.jpg" alt="Painting on canvas" width="64" height="200" /> <br />
Giraffe </a> </div>
<div>
<p> </p>
<p> </p>
<p>Note: <br />
This is on <br />
3 canvases</p>
</div>
</div>
</div>
<!--gallery-->
and the full modifies css is * {
border: 0;
margin: 0;
padding: 0;
}
body {background-image: url(back.jpg);
background-position: center top;
background-repeat: repeat-y;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #333333;
line-height:1.5em;
}
p{
padding-bottom: 15px;
}
/*h3 is used for page titles*/
h3{
font-size:1.5em;
font-variant:small-caps;
margin-bottom:10px;
}
#wrapper {
position:relative;
width: 750px;
margin: 0 auto;
background-image: url(complete-page750.jpg);
background-repeat: no-repeat;
min-height: 600px;
}
* html #wrapper {
height: 600px;
}
#wrapper h1 {
display: block;
height: 160px;
font-size: 1px;
text-indent: -1000px;
}
#wrapper h2 {
display: block;
font-size: 1px;
text-indent: -1000px;
height: 1px;
}
#navigation ul {
list-style: none;
float: left;
margin-top: 40px;
}
#navigation li {
margin: 0 0 50px 20px;
}
#navigation a {
display: block;
width: 170px;
height: 48px;
text-decoration: none;
font-size: 1px;
text-indent: -1000px;
background-position: left top;
}
#navigation a:hover {
background-position: left bottom;
}
#content {
position:relative;
margin-left: 220px;
}
#content p {
padding-bottom: 20px;
}
#content a {
color: #FF00FF;
}
#content a:hover {
color: #00FF00;
}
#content .gallery{
overflow: hidden;
}
#content .gallery div{
float:left;
margin:10px 2px;
text-align:center;
display: inline;
}
#content .gallery a {
text-decoration:none;
color:#333333;
font-weight:bold;
}
#content .gallery a:hover {
color: #333333;
}
Cheers
Graeme