Layout wird im IE komplett unrichtig dargestellt

[molily]

Wenn du mit CSS-Layout noch nicht vertraut bist - was ich mal annehme, weil du mit Tabellenlayout ankamst -, solltest du dich in die verlinkten Quellen einarbeiten. Das Arbeiten mit floats ist nichts anderes als deine Fragestellung, sondern die nötige Grundlage. Du kannst dir auch Grundlagen für Spaltenlayout mit CSS ansehen.

Wenn du mit float statt position arbeitest, brauchst du keine festen Breiten vorgeben, sondern kannst (bei der besagten Dokumentreihenfolge) die Navigation links floaten lassen. Der Content fließt dann automatisch rechts dran vorbei und füllt den restlichen Platz aus. Ein margin-left ist in diesem Fall nicht nötig, da der Float overflow:auto besitzt. Dadurch wird ein Block Formatting Context erzeugt wird, der dafür sorgt, dass der #navi-Float nicht #content überlappt und nur seinen Inhalt verschiebt.

Die Änderungen am CSS sind z.B.:

#navi, #content {
 /* position fällt raus, Rest bleibt */
 height:100%;
 overflow:auto;
}
#navi {
 float:left;
 width:200px;
}
#content {
 /* leer */
}

Bitte probiere mal selbstständig in diese Richtung weiter und beschäftige dich mit den Quellen.

Mathias