Positionierung von Div-Containern

[[molsch]]

Ich würde gerne ein ganz einfaches Layout mit einem Header, einer Navigation, einem Content und einem Footer erstellen. Hier ein Bild zur besseren Veranschaulichung:
http://fhoffmann.wagner52388.de/projekt2/img/layout.jpg
Im Firefox funktioniert das ganze auch ohne Probleme aber der IE rückt den Content unter die Navigation (http://fhoffmann.wagner52388.de/projekt2). Hier mal der relevante Teil meiner CSS Datei:

div#wrapper {
margin:0 auto;
width: 700px;
border-width:1px;
border-style:dashed;
border-color:blue;
text-align:center;
}

div#header {
width: 700px;
height: 150px;
border-width:1px;
border-style:dashed;
border-color:#800000;
text-align:left;
}

div#navi {
float: left;
width: 100px;
border-width:1px;
border-style:dashed;
border-color:#800000;
padding: 20px;
text-align:left;
}

div#content {
margin-left: 140px;
width: 520px;
border-width:1px;
border-style:dashed;
border-color:#800000;
padding: 20px;
text-align: justify;
}

div#footer {
width: 660px;
border-width:1px;
border-style:dashed;
border-color:#800000;
padding: 20px;
text-align: center;
}