Floats have a habit of going screwy if you're not really careful.
There are different approaches - here's one:
HTML:
<div id="box1">
<ul id="navlist">
<li id="active"><a href="index.shtml" id="current">Home</a></li>
<li><a href="index.shtml">Grooming Tools</a></li>
<li><a href="saddles.shtml">Saddles, Bridles and Tack</a></li>
<li><a href="index.shtml">Gloves and Chaps </a></li>
<li><a href="#">Halters and Leads</a></li>
<li><a href="index.shtml">Leather Care </a></li>
<li><a href="index.shtml">Blankets and Pads </a></li>
<li><a href="index.shtml">Bandages and Wraps </a></li>
<li><a href="index.shtml">Stall and Stable </a></li>
<li><a href="index.shtml">Hoof Care and Polish</a></li>
<li><a href="index.shtml">Accessories</a></li>
<li><a href="index.shtml">Boots</a></li>
<li><a href="index.shtml">Site Map </a></li>
<li><a href="index.shtml">Contact Us <br />
</a></li>
</ul>
<img src="images/FTH_logo-comp27jsmall.jpg" alt="logo" width="60" height="54" />
<br />
</div>
<div id="box3">
<ul id="navlist">
<li id="active"><a href="index.shtml" id="current">Home</a></li>
<li><a href="index.shtml">Grooming Tools</a></li>
<li><a href="saddles.shtml">Saddles, Bridles and Tack</a></li>
<li><a href="index.shtml">Gloves and Chaps </a></li>
<li><a href="#">Halters and Leads</a></li>
<li><a href="index.shtml">Leather Care </a></li>
<li><a href="index.shtml">Blankets and Pads </a></li>
<li><a href="index.shtml">Bandages and Wraps </a></li>
<li><a href="index.shtml">Stall and Stable </a></li>
<li><a href="index.shtml">Hoof Care and Polish</a></li>
<li><a href="index.shtml">Accessories</a></li>
<li><a href="index.shtml">Boots</a></li>
<li><a href="index.shtml">Site Map </a></li>
<li><a href="index.shtml">Contact Us <br />
</a></li>
</ul>
<img src="images/FTH_logo-comp27jsmall.jpg" alt="logo" width="60" height="54" />
<br />
</div>
You'll notice I've just copied box 1's content for an example.
CSS:
#box3 {
clear:left;
float: left;
width: 170px;
border: solid 1px #9B6245;
background-color: #fff;
margin:5px 10px 10px 5px;
padding:5px;
}
The important bit there is the clear:left - otherwise the boxes will line up next to each other rather than above one another.
The other way would be to put a div around both left hand boxes and float that left - you then take floats and clears off the two contained boxes as they just sit one on top of the other in the "normal" flow of the page.
Both work - I tend to float bigger containers containing smaller boxes but see which works best for you.
