Diffiziles Problem mit float:

[Orlando]

Werte Gemeinde,

was haltet ihr von folgender Darstellung in Opera und Mozilla?

CSS:

div { width:200px; height:200px; color:#f00; background-color:#00f; border:1px solid #f00; margin:1em; }
 #a, #b, #c { float:left; }
 #d { background-color:#080; }

HTML:

<p>...</p>
 <div id="a">A</div>
 <div id="b">B</div>
 <div id="c">C</div>
 <div id="d">D</div>

Ergebnis:

<img src="http://skop.net/opera/div-float-div.gif" border="0" alt="">

Die Frage ist: Darf der Inhalt von <div> D in diesem Beispiel außerhalb des Elements selbst gerendert werden? Wenn ja, wo ist das definiert? Wenn nein, warum sind sich die beiden besten Browser einig in der Darstellung? Irgendwie komme ich auf keinen grünen Zweig.

Das Beispiel online:

http://skop.net/opera/div-float-div.html

Grüße,
 Roland

[Cyx23]

Hallo,

Die Frage ist: Darf der Inhalt von <div> D in diesem Beispiel außerhalb des Elements selbst gerendert werden? Wenn ja, wo ist das definiert? Wenn nein, warum sind sich die beiden besten Browser einig in der Darstellung? Irgendwie komme ich auf keinen grünen Zweig.

mit #d { clear:both} läßt es sich regeln, damit wird auch die hohe -oder zu hohe- Priorität bzw. Auswirkung von float deutlich. Zu der Problematik müsste auch (2003?) ein Erklärungsversuch im Archiv zu finden sein..

Grüsse

Cyx23

[C2H5OH]

Die Frage ist: Darf der Inhalt von <div> D in diesem Beispiel außerhalb des Elements selbst gerendert werden? Wenn ja, wo ist das definiert? Wenn nein, warum sind sich die beiden besten Browser einig in der Darstellung? Irgendwie komme ich auf keinen grünen Zweig.

Die Antwort: Der Inhalt eines divs wird immer dann auch außerhalb des divs gerendert, wenn innerhalb des divs der Platz nicht ausreicht. Dieses wird üblicherweise mit der Anweisung 'overflow:hidden:' verhindert.

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.).

Leider reagieren nach einfügen der obigen CSS-Anweisung alle Browser anders:
MSIE reagiert garnicht und stellt alles nach wie vor falsch dar, nämlich unterhalb der Reihe der A-C divs, als ob ein clear:left; oder clear:both; das float:left; auflösen würde.
Opera stellt lediglich den Inhalt des D-divs nicht mehr da, da dieser ja außerhalb liegt, die Position des dD-divs wird nicht berührt.
Mozilla kommt als einziger Browser zu einer (zumindest intuitiv) korrekten Darstellung (wen wundert's): das D-div wir mit Inhalt rechts neben dem C-div dargestellt.

Gruß
C2H5OH

[Cyx23]

Hallo,

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?

Mozilla kommt als einziger Browser zu einer (zumindest intuitiv) korrekten Darstellung (wen wundert's): das D-div wir mit Inhalt rechts neben dem C-div dargestellt.

Sieht bei mir (ob nur die kleinere Auflösung verantwortlich sein sollte?) anders aus, ohne clear wird d zerlegt und der Inhalt wird nach C / unter A angezeigt, oder meintest du eigentlich "der D-div Inhalt wird rechts.."?

Grüsse

Cyx23

[C2H5OH]

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