Okay I have this website www.deminyx.com and It looks decent in Google Chrome but stupid in IE my #content div is in a different place, can anyone help me clean up my code. I validated the HTML and CSS with the w3c validator too! UGHH lol!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Deminyx| Web Solutions</title><link rel="stylesheet" href="index.css" type="text/css">



</head><body>
<div id="header"><a href="index.html">&nbsp;Deminyx</a></div>
<div id="side">
<table>
<tbody>
<tr>
<td><a href="service.html">The Service</a></td>
</tr>
<tr>
<td><a href="cost.html">The Cost</a></td>
</tr>
<tr>
<td><a href="ease.html">The Ease</a></td>
</tr>
</tbody>
</table>
</div>
<div id="content">This is my content, I wont waste your time.</div>
</body></html>
and the CSS

Code:
body {
background-color:#666;
}

#header {
background-color:#399;
text-align:center;
font-family:Arial,Helvetica,sans-serif;
font-size:7em;
border-style:solid;
border-width:2px;
}

a:hover {
font-family:Arial,Helvetica,sans-serif;
background-color:#399;
}

a {
text-decoration:none;
color:#000;
font-size:1em;
line-height:1em;
}

table {
border:solid #000;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
line-height:2.2em;
width:20%;
font-size:1.5em;
margin-top:12px;
padding:2px 2px 2px 19px;
}

#content {
position:relative;
float:right;
background-color:#00991c;
font-family:Arial,Helvetica,sans-serif;
width:78%;
font-size:1.2em;
margin-top:-160px;
border-style:solid;
padding:4px 4px 4px 8px;
}