mika: margin : 50px auto; im IE6 und IE7

Beitrag lesen

Hallo zusammen,

ich habe ein XHTML-Template mit verschachtelten Divs. Für das äußerste Div habe ich ein margin: 50px auto; notiert, sodass es horizontal zentriert ist und jeweils oben und unten ein Abstand von 50px eingehalten wird.

Im IE6 und IE7 wird jedoch unterhalb des Divs überhaupt kein Abstand angezeigt, sprich das Div schließt unten mit dem Rand des Browsers bündig ab.

Ist das ein Bug in älteren Versionen von IE? Oder habe ich einen Fehler im CSS?

#wrap {
position : relative;
width : 770px;
margin: 50px auto;
background : #ff0000;
}

#content {
position : relative;
width : 100%;
height : 500px;
margin-top : 300px;
float : left;
background : #0000ff;
}

#content_right {
position : relative;
width : 570px;
height : 500px;
margin-top : 300px;
float : right;
background : #00ff00;
}

#content_left {
position : relative;
width : 200px;
height : 300px;
margin-top : 300px;
float : left;
background : #0000ff;
}

#clear {
clear : both;
}

#header {
position : absolute;
width : 100%;
height : 200px;
top : 0;
background : #333;
}

#mainteaser {
position : absolute;
width : 100%;
height : 100px;
top : 200px;
background : #999;
}

#footer {
position : relative;
width : 100%;
height : 200px;
background : #ddd;
}

<body>
<div id="wrap">
<div id="content_right">
<p>content_right</p>
</div>
<div id="content_left">
<p>content_left</p>
</div>
<div id="clear"></div>
<div id="header">
<p>header</p>
</div>
<div id="mainteaser">
<p>mainteser</p>
</div>
<div id="footer">
<p>footer</p>
</div>
</div>
</body>