This works. It could be 'cleaner' (I have some redundant coding in here and could flesh it down some), but it is how I think you're trying to do this.
I GOT RID OF that doggone meta-refresh tag... anyone whom sees this stuff long enough does not need the mind-phreak, and "10" (seconds) is a good value for meta-refresh... it's about as long as I'd stay on a URL that 'refreshes'... :(
It is also difficult to understand what you're trying to do, you have a DIV called "rightSide" (so one assumes that you want to 'to the right'??), but the text says that it's the "...Side content goes here. This should be positioned directly below the navigation pane...", which to the LEFT, and besides, -you'd want your "content" to be in the middle and/or right, yes?
Anyway, that is how I interpret your intent. :)
Here is the revised code (with STRICT !DOCTYPE), and it works equally well in IE and Firefox:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Test Page</title>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1" />
<style type="text/css">
body, html {margin: 0px;
padding: 0px;
border:0;}
body {margin-bottom:25px;}/* required: gives 25-px space below footer */
a {text-decoration: none;
color: #000000;}
a:hover {color: #ffffff;}
li {list-style-type: circle;}
div {border: 1px solid black;}
div#container {width:98%; margin:0 auto; padding:0;}
div#content {padding:40px 30px 40px 15px; height:100%; text-align:left; border:none;}
div.header {width:98%; height:79px;
margin:25px auto 0 auto;
background-color: #99CC66;}
div.navigation {
background-color: #99CC66;
font: italic small-caps bold 14px sans-serif;
float:left;
clear:left;
margin:0 15px auto 0;
line-height: 1.5em;
letter-spacing: 0.3ex;
width: 215px;
padding: 20px;
}
div#rightSide {background-color: #99CC66;
font: italic small-caps bold 14px sans-serif;
margin:0 15px auto 0;
float:left;
clear:left;
width: 225px;
padding: 15px;
}
</style>
</head>
<body>
<div class="header">
<img src="http://www.doublethinkdesigns.com/pics/header.png" alt="Double Think Designs" style="float:left; margin:0;">
</div>
<div id="container"><!-- wraps everything below header div -->
<div class="navigation">
<ul>
<li><a href="#" title="Home">Home</a>
<li><a href="#" title="About">About</a>
<li><a href="#" title="Services">Services</a>
<li><a href="#" title="Contact">Contact</a>
</ul>
</div>
<div id="rightSide">
Side content goes here. This should be positioned directly below the navigation pane. If not then i did not configure the stylesheet tag correctly.
Either way, I will figure it out sooner than later.
</div>
<div id="content"><h1>Header tag here</h1>
<p>Some text goes in here. This is the CONTENT part of the layout.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede.
<img src="images/this_pic.gif" alt="left-hand image"
style="width:85px; height:75px; margin:6px; border: 1px dotted red; float:left;" />
Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus.
<img src="images/this_pic.gif" alt="right-hand image"
style="width:85px; height:75px; margin:6px; border: 1px dotted red; float:right;" />
Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. </p>
</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. </p>
</div>
<div id="footer" style="border: 1px dotted blue; background-color:#c7e19e;
width:88%; margin:0 auto 10px auto; height:20px; padding:10px 45px 10px 45px;">
Here is a place for your footer data, text or whatever.
</div>
</div><!-- end CONTENT -->
</body>
</html>
I hope that it is something closer to what you're after. :)
-Joel