Wow, that's some markup you have there. My general recommendation in this sort of situation is start from scratch.
A website isn't just about the design. It's obvious you're a very capable designer, but the markup has to be just as beautiful. It's important to plan well and execute even better.
When I, as a fellow designer/developer, view the source of your website I should be to immediately grasp your layout. This happens when your markup is semantic and well organized.
Your website is very common of what I see in the design world -- well meaning folk, who get caught up in HTML/CSS. Before I fix the problems you're having with your site, I'd like to make some suggestions:
1) Validate your markup (i think you've done this).
2) Use a strict Doctype whenever possible. It's true that the strict doctype is restrictive at times but most of the type you should try to keep your markup to the highest standards.
3) Keep CSS out of HTML. Unless you need the CSS inline for some sort of script/dynamic effect, keep CSS external.
4) Make your markup semantic. Name things using logical terms. You've named your divs things like contentcon and content1, content2, etc... That's fine. But for future reference, it's much easier if you name the contact details div contact-details instead of content2
5) Try to minimize your markup wherever possible. Organization is good but over-compartmentalizing is not.
The biggest problem with your markup are with points 4 and 5 above (along with an overzealous use of floats). Also, you have a lot of redundant CSS -- while not a problem it can easily become one. Instead of having three blocks with exactly the same styling, use a class instead.
Next, regarding floats. When you float something, it's essentially removed from the flow of the document. So if you have a div with everything floated inside, it's height is (for all technical purposes) zero. In your markup, you were floating nearly everything below the main image, thus the result you were getting.
Now that my lecture is over, here's your fix. You'll have to add your JS back in and make small CSS changes here and there to get the spacing exactly as you had it before. I've only tested in FF so might also be some IE bugs in there, but those can be easily solved.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="main.css" rel="stylesheet" type="text/css" />
<title>Vander Design</title>
</head>
<body>
<div id="topcontainer">
<div id="logo">
<img alt="Vander Logo" src="http://www.vander.co.nz/Images/Logo.jpg"/>
</div>
</div>
<div id="box">
<div id="navigation">
<ul>
<li><img alt="Home" src="http://www.vander.co.nz/Images/ButtonOn/ButtonOn_01.jpg"/></li>
<li><a href="about.php"><img src="http://www.vander.co.nz/Images/Button_02.jpg" alt="About Vander" id="About" onmouseover="MM_effectAppearFade(this, 100, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 100, 0, 100, false)"/></a></li>
<li><a href="portfolio.php"><img src="http://www.vander.co.nz/Images/Button_03.jpg" alt="Portfolio" id="Portfolio" onmouseover="MM_effectAppearFade(this, 100, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 100, 0, 100, false)"/></a></li>
<li><a href="services.php"><img src="http://www.vander.co.nz/Images/Button_04.jpg" alt="Services" id="Services" onmouseover="MM_effectAppearFade(this, 100, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 100, 0, 100, false)"/></a></li>
<li><a href="contact.php"><img src="http://www.vander.co.nz/Images/Button_05.jpg" alt="Contact" id="Contact" onmouseover="MM_effectAppearFade(this, 100, 100, 0, false)" onmouseout="MM_effectAppearFade(this, 100, 0, 100, false)"/></a></li>
</ul>
</div>
<div id="middle">
<div id="photo">
<div id="popup" style="display:none;">
<img alt="Website Information" src="http://www.vander.co.nz/Images/popupweb.gif" id="popupweb" />
</div>
<div id="deals">
<div class="deal" onmouseover="MM_effectAppearFade('popup', 200, 0, 80, false)" onmouseout="MM_effectAppearFade('popup', 200, 80, 0, false)">
<img src="http://www.vander.co.nz/Images/Deal_03.jpg" alt="" />
</div>
<div class="deal">
<img alt="Logo" src="http://www.vander.co.nz/Images/Deal_05.jpg" />
</div>
<div class="deal">
<img alt="Business Card" src="http://www.vander.co.nz/Images/Deal_06.jpg" />
</div>
</div>
</div>
</div>
<div id="contentcon">
<div id="content">
<div class="left">
<h1>Style & Simplicity</h1>
<p>With professional Graphic Design & Web Design for alot less than most,<br />Vander Design is the way to go.</p>
<p>We will start with a few concepts of your design and develop it until a clean finished product is reached. By communicating with you throughout the whole process we ensure you will walk away happy and that's our main aim.</p>
<p>For more information on what we can offer you see our <a href="Services.php">services page.</a></p>
</div>
<div class="right">
<h1>Our Details</h1>
<p>Phone - 021 144 3744</p>
<p>Email - brad@vander.co.nz</p>
<p>Post - 28A Jocelyn St, Casebrook, Christchurch, New Zealand</p>
<p><a href="contact.php">Online Contact Form</a></p>
</div>
</div>
<br style="clear:both;" />
<h2>How our design process works...</h2>
<div id="steps">
<div class="left">
<div id="step1" class="step">
<img alt="Step 1" src="http://www.vander.co.nz/Images/Step01.jpg" />
<p>We will whip up a few concepts based on what<br />you have told us in regards to your target<br /> audience, personal taste. purpose for the<br />design and your ultimate end goal.</p>
</div>
<div id="step2" class="step">
<img alt="Step 2" src="http://www.vander.co.nz/Images/Step02.jpg" />
<p>We will then move on and develop one or two design concepts with you, changing colours, size, positioning and any other design elements until the imagery is complete.</p>
</div>
<div id="step3" class="step">
<img alt="Step 3" src="http://www.vander.co.nz/Images/Step03.jpg" />
<p>You will then have a finished product and can walk away satisfied. We will also steer you and assist you throughout the printing process. <br /><br />We will provide you with FULL working files on disk along with keeping a copy ourselves so that any repeat work or adjustments can be made quickly and easily.</p>
</div>
</div>
<div class="right">
<img alt="Websites" src="http://www.vander.co.nz/Images/webthumb.gif"/>
<img alt="Tees" style="margin-top:8px;" src="http://www.vander.co.nz/Images/teethumb.gif"/>
<img alt="Van Logo" style="margin-top:16px;" src="http://www.vander.co.nz/Images/vanthumb.gif"/>
</div>
</div>
</div>
<div id="footer">
<span class="h4">Home</span> <a class="h3" href="about.php">About</a> <a class="h3" href="services.php">Services</a> <a class="h3" href="portfolio.php">Portfolio</a> <a class="h3" href="contact.php">Contact</a>
</div>
</div>
</body>
</html>
CSS:
html,body{
height: 100%;
margin: 0;
padding: 0;
background:url(http://www.vander.co.nz/Images/BG.jpg);
}
/* Header */
#topcontainer {
margin:0;
padding:0;
height:88px;
width:100%;
background: url(http://www.vander.co.nz/Images/BGTop.jpg) top center repeat;
}
#logo{
padding:0px;
margin:0 auto;
background:url(http://www.vander.co.nz/Images/BGlighttop.jpg) top center repeat;
border-left:1px solid #999999;
border-right:1px solid #999999;
width:690px;
height:88px;
}
#logo img {
margin-left:2px;
}
/* Content Container */
#box {
padding:0px;
margin:0 auto;
background:url(http://www.vander.co.nz/Images/BGlight.jpg) top center repeat;
border-left:1px solid #999999;
border-right:1px solid #999999;
width:690px;
}
/* Navigation */
#navigation {
padding-top:36px;
width:690px;
height:31px;
margin:0 auto 10px auto;
}
#navigation ul { list-style:none; margin:0; padding:0;}
#navigation li { display:inline; float:left;}
/* Deals */
#photo {
margin-top:7px;
margin-left:11px;
width:667px;
height:265px;
background: url(http://www.vander.co.nz/Images/Image_03.jpg) top center repeat;
}
#deals {
margin:21px 20px 0 0;
width:205px;
height:201px;
float:right;
}
.deal {
margin-left:10px;
margin-bottom:10px;
width:205px;
height:67px;
}
/* Typography */
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #000000;
text-decoration: none;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #418dcd;
text-decoration: none;
margin:30px 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color:#444444;
text-decoration: none;
}
/* Text Blocks */
#contentcon
{
width:667px;
margin:10px auto;
}
.left {
float:left;
width:380px;
border-right:1px solid #999999;
padding-right:24px;
}
.right {
float:right;
width:250px;
}
/* Steps */
.step { clear:both; }
.step img { float:left; }
.step p { padding-top:25px; }
#step3 p { padding-top:10px; }
/* Footer */
#footer {
border-top:1px solid #e6e5e4;
border-bottom:1px solid #e6e5e4;
background:#ffffff;
margin-left:0px;
text-align:center;
height:40px;
line-height:40px;
clear:both;
}