nicht angemeldet
Durch die float-Anweisung für die divs A-C muß der Inhalt vom D-div rechts neben dem C-div gerendert werden, dieses ist aber aufgrund der geringen Breite des divs nicht möglich, also wird es soweit nach unten geschoben bis es unterhalb der A-,B-,C-divs erscheinen kann, das ist aber schon außerhalb des D-divs, aber bei weitem kein Problem (s.o.).
anders herum betrachtet, welche Regeln gelten denn wenn float das document zerpflückt, wie 'mächtig' darf float sein?
Ich habe mal einwenig mit dem float-Beispiel aus selfhtml herumgespielt um das richtige Verhalten zu ergründen (Quelltext siehe unten).
IMHO ist das Verhalten von Mozilla und Opera vollkommen korrekt, das des MSIE nur solange weder für width noch height von 'auto' abweichende Angaben gemacht werden.
Mozilla kann mittels overflow:hidden; bzw visible zwischen den Darstellengen von Opera und M$IE switchen (weiß der Teufel weshalb).
<?xml version="1.0" encoding="ISO-8859-1"?>
<!doctype html public "-//W3C//DTD XHTML 1.1 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>floated divs</title>
<style type="text/css">
html {border:3px solid #800;}
body {color:#000; background-color:#eee; border:3px solid #080;}
code { color:#008; background-color:#afa; }
p { border:1em solid yellow; }
div { }
#a, #b, #c {float:left; width:200px; color:#f00; background-color:#00f; border:1px solid #f00; margin:1em;}
#d { width:400px; height:200px; background-color:#080; }
</style>
</head>
<body>
<p><code>width</code>, <code>height</code>, <code>border</code> und <code>background-color</code> von <strong>DIV D</strong> (grün)
werden an der höchstmöglichen Positon nach dem <code><p></code> gerendert, der Inhalt scheint außerhalb von
<code><body></code>
zu liegen.</p>
<a onclick="document.getElementById('d').style.overflow = 'hidden';">hide overflow</a><br />
<a onclick="document.getElementById('d').style.overflow = 'visible';">show overflow</a><br />
<a onclick="document.getElementById('d').style.width = 'auto';">change width</a><br />
<a onclick="document.getElementById('d').style.width = 400+'px';">restore width</a><br />
<a onclick="document.getElementById('d').style.height = 'auto';">change height</a><br />
<a onclick="document.getElementById('d').style.height = 200+'px';">restore height</a>
<h1 id="a">A</h1>
<p id="d">Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei
Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei
Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei
Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei
Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei
Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei Kakadu Papagei </p>
</body>
</html>
Gruß
C2H5OH