does anyone know a fix for this layout? you can see that netscape doesnt seem to include #footer in the #main region.

Pls dont be afraid by the long code below, its just a simple skeleton layout.

Any help is appreciated, thanks.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
<title></title>
<style>
body {
margin:0px;
padding:0px;
height:100%;
}
#align {
text-align:center;
}
#main {
width:780px;
margin-left:auto;
margin-right:auto;
border:1px dashed red;
height:100%;
background-color:pink;
}
#logo {
float:left;
padding:30px 0px 0px 10px;
}
#menu{
margin-top:28px;
margin-left:170px;
}
#content {
position:relative;
width:600px;
text-align:left;
margin-left:170px;
padding:18px 10px 0px 0px;
border:1px dashed red;
background-color:yellow;
}
#content span.left {
position:relative;
top:50px;
width:285px;
float:left;
text-align:justify;
}
#content span.right {
position:relative;
top:50px;
width:285px;
float:right;
text-align:justify;
}
#footer span.left {
float:left;
text-align:left;
padding:50px 0px 0px 10px;
}
#footer span.right {
float:right;
text-align:right;
padding:100px 10px 10px 0px;
font-size:10px;
}
</style>
</head>
<body>
<div id="align">
	<div id="main">
	<div id="logo">
	HELLO WORLD
	</div>
	<div id="menu">	
	HOME | ABOUT | TEXT	
	<hr/>
	</div>
	<div id="content">
	<b>HELLO</b>
	<span class="left">	
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	</span>
	<span class="right">
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text 
	</span>
	</div>
	<div id="footer">
	<span class="left">
	 Text <br/>
	 Text <br/>
	 Text <br/>
	 Text <br/>
	 Text <br/>
	</span>
	<span class="right">
	Text Text Text Text Text Text Text 
	</span>
	</div>
	</div>
</div>
</body>
</html>