Box verrutscht im IE 6

[Mathias]

Hi!

Ich habe eine Website mit div-boxen gestaltet. HTML-Code sieht so aus:

<div id="container">
<div id="header">Header-Bild</div>
<div id="menu">Hier ist das Menü<div id="spacer">&nbsp;</div></div>
<div id="text">
Hier steht der Text
</div>
<div id="pencil">Hier ist noch ein Bild</div>
<div id="footer">Hier ist das Footer-Bild</div>
</div>

Und dann kommt der css-Teil:

#container {
position:absolute;
top:10px;
left:50%;
margin-left:-358px;
width:715px;
padding:0px;
margin-bottom:0px;
background-image:url(images/border.jpg);
}

#header {
position:relative;
top:0px;
left:0px;
}

#text {
position:relative;
float:right;
width:445px;
margin-right:50px;
color:#000000;
font-family:Arial, sans serif;
font-size:12px;
}

#menu {
z-index:2;
position:relative;
top:30px;
float:left;
margin-left:24px;
width:180px;
color:#000000;
}

#spacer {
position:relative;
visibility:hidden;
height:150px;
}

#footer {
position:relative;
clear: both;
top:0px;
}

#pencil {
position:absolute;
display:block;
bottom:187px;
left:0px;
}

Im IE 7 und auch im Mozilla Firefox (Version 2.0) funktioniert es. Im IE 6 rutscht das Text-Div (div id=text) nach unten unter das Menü.

Leider weiß ich nicht, woran das liegt. Kann mir da einer helfen?

Danke für eure Hilfe!

mfg

mathias