Ollie: CSS, Floating

Beitrag lesen

Hallo Forum,

mir ist da gerade ein etwas unerwartetes Problem mit der Eigenschaft Float begegnet, bei dem ich nicht mehr weiter komme.

Quelltext:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Floating</title>
<style type="text/css">
body{margin:0; padding:0;}
.quer {float:left; margin:1px; background:#ccc; width:200px; height:100px;}
.hoch {float:left; margin:1px; background:#ccc; width:100px; height:200px;}
</style>
</head>
<body>
<div style="background:blue; float:none">
 <div class="quer"></div>
 <div class="quer"></div>
 <div class="quer"></div>
 <div class="quer"></div>
 <div class="quer"></div>
 <div class="quer"></div>
 <div style="clear:both"></div>
</div>
</body>
</html>

Nun würde ich hier erwarten, dass das blaue Elternelement wegen des clears nach den Inhaltsdivs in allen Browsern die inliegenden Divs umspannt.

Sobald ich aber die Seite kleiner mache und den Inhalt zum Zeilenumbruch zwinge, rutscht im IE7 der Beginn des blauen Elternelements eine Inhaltszeile tiefer.

Entweder sitze ich auf meinem Gehirn oder ich übersehe etwas, kann einer von Euch mir weiter helfen?

Danke im Voraus,
Ollie