Okay, I've modified it so that it appears how I want it. Thank you for your help. I also removed the excess divs.
Here is what I have...
Code:
<body>
<div style="width:700px;height:500px;background-color:red;margin-left:auto;margin-right:auto;">
<h1 style="text-align:center;width:500px;height:50px;background-color:orange;margin-left:auto;margin-right:auto;margin-bottom:0px;">HEADER</h1>
<div style="width:200px;height:400px;background-color:lightgreen;float:left;">
<ul>
<li>HOME</li>
<li><a href="page2.htm">PAGE 2</a></li>
<li><a href="./folder2/">PAGE 3 IN FOLDER 2</a></li>
</ul>
</div>
<div style="width:700px;height:400px;background-color:lightblue;text-align:center;">
This is some stuff.
</div>
<h2 style="clear:both;text-align:center;width:500px;height:50px;background-color:yellow;margin-left:auto;margin-right:auto;margin-top:0px;">FOOTER</h2>
</div>
</body>
What seemed to fix it was the addition of 'margin-top:0px;' to the h2.