As WebJoel pointed out, there are a few unclosed divs. However, the overall structure needs a little work as well.
As for the alignment on the side menu, I notice you went back to the graphical "residential" text, which is fine, but we need to align the text around it. My original coding with this text as a <h2> header provided content for the benefit of screen readers etc - at the moment, a vision-impared person would have no idea they are on the Residential Collections page. The <h2> also spaced the first link, and hence the dotted line, down from the top. Putting the <h2> back in there and hiding the text visually not only gives content, it also spaces the dotted line down.
As the top logo and links are positioned above the rest of the page, they can logically come first in the html. Whilst the logo image looks fine, it means nothing to screen readers and search engines, so this is best marked up as a <h1> heading text, with the actual text hidden and replaced by the graphic logo in the css. The logo and the top links can also be logically grouped within the one element.
The content div has a problem overlapping the side menu. As the menu is floated, the content div does not need to be floated - it can just get a side margin to ovoid the float and slide behind it, There is also then no need to give a width - it will fill the area naturally.
At the moment, there is not really a connection between each thumbnail graphic and the text link - they are essentially two separate links. There is also a lot of repeated inline css which can be cleaned up. As the thumbnails are essentially a group of links - a list - they can be logically grouped as a list, just like the menus. As each thumbnail picture is essentially visual "decoration" for the link, the graphics themselves can be background images. Each <a> tag in the list can be styled as a block of a particular size (as each thumbnail is the same size) with the graphic inserted as a background vis inline styles to avoid a stack of different classes. The list <li>s can then be floated and spaced to give the grid.
The html I therefore came up with is :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Fairmont Designs Collections</title>
<link href="rescss_collections.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<!-- top banner -->
<div class="topmenu">
<h1><a href="http://www.fairmontdesigns.com">Fairmont Designs</a></h1>
<ul>
<li><a href="#">Home</a></li>
<li class="whiteline"><a href="#">About Us</a></li>
<li class="whiteline"><a href="#">Site Map</a></li>
</ul>
</div>
<!-- side bar -->
<div class="sidebar">
<ul>
<li><h2>Residential</h2></li>
<li><a href="res_collections.html" class="first">Collections</a></li>
<li><a href="#">American Themes</a></li>
<li><a href="#">Bonaparte</a></li>
<li><a href="#">Cascadia</a></li>
<li><a href="#">Estates II</a></li>
<li><a href="#">Hudson Heights</a></li>
<li><a href="#">Repertoire</a></li>
<li><a href="#">Retrospect</a></li>
<li><a href="#">Tamarind Grove</a></li>
<li><a href="#">Villa Veneto</a></li>
<li><a href="#" class="first">Contact Us</a></li>
</ul>
</div>
<div class="middlebg">
<!-- thumbnails row 1 -->
<ul class="thumbs">
<li><a href="#" style="background-image:url(images/residential/thb_AT.jpg)" title="American Themes Collection">American Themes</a></li>
<li><a href="#" style="background-image:url(images/residential/thb_AT.jpg)" title="Bonaparte Collection">Bonaparte</a></li>
<li><a href="#" style="background-image:url(images/residential/thb_AT.jpg)" title="Cascadia Collection">Cascadia</a></li>
<li><a href="#" style="background-image:url(images/residential/thb_AT.jpg)" title="Estates II Collection">Estates II</a></li>
<li><a href="#" style="background-image:url(images/residential/thb_AT.jpg)" title="Hudson Heights Collection">Hudson Heights</a></li>
<li><a href="#" style="background-image:url(images/residential/thb_AT.jpg)" title="Repertoire Collection">Repertoire</a></li>
<li><a href="#" style="background-image:url(images/residential/thb_AT.jpg)" title="Retrospect Collection">Retrospect</a></li>
<li><a href="#" style="background-image:url(images/residential/thb_AT.jpg)" title="Tamarind Grove Collection">Tamarind Grove</a></li>
<li><a href="#" style="background-image:url(images/residential/thb_AT.jpg)" title="Villa Veneto Collection">Villa Veneto</a></li>
</ul>
</div>
</div>
</body>
</html>
and the css: * {
margin: 0;
padding: 0;
}
/* Background */
body {
background-color: #f7f7f5;
background-image: url(images/index_bg.gif);
background-repeat: repeat-x;
background-attachment: fixed;
font-family: Times New Roman, Times,serif;
}
/* links */
a {
color: #ad7f6b;
font-size: 12px;
text-decoration: none;
}
a:hover {
color: #000000;
}
/* css table */
#wrapper {
width: 683px;
margin: 0 auto;
padding: 5px;
overflow: hidden;
}
/* sidebar */
.sidebar {
background-image: url(images/residential/sidebar.gif);
width: 149px;
height: 483px;
float: left;
margin-top: 5px;
}
/* side links */
.sidebar ul {
width: 120px;
border-left: 1px dotted white;
margin: 20px 0 0 15px;
height: 450px;
}
.sidebar li {
list-style: none;
}
.sidebar a {
color: #FFFFFF;
text-align: right;
font-size: 12px;
line-height: 20px;
text-decoration: none;
width: 120px;
display: block;
}
.sidebar a:hover {
color: #000000;
}
.sidebar .first {
font-weight: bold;
padding-top: 10px;
border-top: 1px dotted white; margin-top: 18px;
}
.sidebar h2 {
display: block;
font-size: 1px;
text-indent: -1000px;
height: 10px;
}
/* top navigation */
.topmenu {
height: 36px;
overflow: hidden;
}
.topmenu ul {
margin: 20px 0 0 20px;
float: left;
display: inline;
}
.topmenu li {
float:left;
list-style: none;
display: inline;
}
.topmenu .whiteline {
border-left: 1px dotted white;
}
.topmenu a {
color: #FFFFFF;
font-size: 12px;
text-decoration: none;
display: block;
padding: 0 5px;
line-height: 16px;
}
.topmenu a:hover {
color: #000000;
}
.topmenu h1 {
float: left;
width: 145px;
height: 36px;
background-image: url(images/logo.png);
font-size: 1px;
margin-left: 149px;
display: inline;
text-indent: -1000px;
}
/* Middle Background */
.middlebg {
background-image: url(images/residential/middlebg.gif);
height: 434px;
margin: 5px 0 0 150px;
padding: 20px 5px 0;
}
.middlebg .thumbs {
}
.middlebg .thumbs li {
list-style: none;
float: left;
display: inline;
margin: 0 0 10px 20px;
}
.middlebg .thumbs a {
display: block;
width: 106px;
height: 21px;
text-align: center;
padding-top: 70px;
}
Note that various display:inline declarations are for the benefit of IE6 double margin float bug.
Cheers
Graeme