Hi,
You have a few misunderstandings with CSS, I'll post my solution and then explain what I have changed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Layout 33</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
html, body{
background: #EFEFEF;
margin:10px;
font-family: Arial;
font-size: .8em;
padding:0;
text-align: center;
}
a {
display:block;
color: #006;
padding:10px;
}
#container {
text-align:left;
width:790px;
margin:0 auto;
border:1px solid #9E924F;
background: white;
}
#header {
height:249px;
background:#CC3 url(images/idea2_r1_c1.jpg) no-repeat top left;
}
#navigation {
float:right;
width:170px;
padding-right: 60px;
background: #FC0;
}
#content {
float:left;
width:475px;
padding-left: 50px;
background: #FC0;
}
#footer {
clear: both;
background:#CC3 url(images/idea2_r5_c1.jpg) no-repeat top right;
width:100%;
height:224px;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<p><strong>1) Content here.</strong> column long long column very long
fill fill fill long text text column text silly very make long very
fill silly make make long make text fill very long text column silly
silly very column long very column filler fill long make filler long
silly very long silly silly silly long filler make column filler make
silly long long fill very.</p>
<p>very make make fill silly long long filler column long make silly silly
column filler fill fill very filler text fill filler column make fill
make text very make make very fill fill long make very filler column
very long very filler silly very make filler silly make make column
column </p>
<p>fill long make long text very make long fill column make text very
silly column filler silly text fill text filler filler filler make make
make make text filler fill column filler make silly make text text fill
make very filler column very </p>
<p>column text long column make silly long text filler silly very very
very long filler fill very fill silly very make make filler text filler
text make silly text text long fill fill make text fill long text very
silly long long filler filler fill silly long make column make silly
long column long make very </p>
<p>column text long column make silly long text filler silly very very
very long filler fill very fill silly very make make filler text filler
text make silly text text long fill fill make text fill long text very
silly long long filler filler fill silly long make column make silly
long column long make very </p>
<p>column text long column make silly long text filler silly very very
very long filler fill very fill silly very make make filler text filler
text make silly text text long fill fill make text fill long text very
silly long long filler filler fill silly long make column make silly
long column long make very </p>
<p>column text long column make silly long text filler silly very very
very long filler fill very fill silly very make make filler text filler
text make silly text text long fill fill make text fill long text very
silly long long filler filler fill silly long make column make silly
long column long make very </p>
</div>
<div id="navigation">
<p><strong>2) Navigation here.</strong> long long fill filler very fill
column column silly filler very filler fill fill filler text fill very
silly fill text filler silly silly filler fill very make fill column text
column very very column fill fill very silly column silly silly fill fill
long filler </p>
</div>
<div id="footer"></div>
</div>
<!-- container -->
</body>
</html>
I first removed the CSS you weren't using, extra, outer - I also removed middle because it wasn't really needed.
I changed the colors to something that wasn't so offensive 
I added text-align: center; to the body so IE 5.x would center it.
font-size in px is a no-no, I have used em for flexibility.
You don't need div#example before all your id names.
overflow: hidden; wasn't needed in the container.
Simplified using shorthand border: 1px solid #9E924F;
position:relative; don't use for header.
margin: 0px auto; is only needed to center the container - because all the other elements are within this div already they don't need it.
padding-right: 1.18cm; centimeters are a big no-no - use pixels
The footer doesn't need float:left; it just needs to clear the above floats, so add clear: both.
CSS working in IE but not FF
Bookmarks