nicht angemeldet
Hi!
Kann mir mal jemand erklären wie sich verschachtelte floats zu verhalten haben?
Es geht darum, dass ich ich diese einerseits für das Seitenlayout und auch für die Darstellung der Inhalte verweden will.
Hier erstmal der Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<!-- navi -->
<div style="float:left;width:190px;height:500px;background:#CCCCCC;border:1px solid #000000;"></div>
<!-- navi -->
<!-- content -->
<div style="width:500px;margin-left:200px;border:1px solid #000000;">
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<div style="float:left;">
<div style="width:100px;height:100px;background:#000000;"></div>
</div>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<div style="clear:left;"></div>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<h1>Headline 1</h1>
<h2>Headline 2</h2>
<div style="float:left;">
<div style="width:100px;height:100px;background:#000000;"></div>
</div>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
<div style="clear:left;"></div>
<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
</div>
<!-- content -->
</body>
</html>
Das ganze soll eine Seite mit Teasern (Bild und Text) sein, der schwarze 100x100 Pixel div soll hier das Bild darstellen und vom Text umflossen werden.
Das folgende Element soll das Bild nicht mehr umfließen, denn es könnte ja mal weniger Text sein, als das Bild hoch ist. Also kommt der <div style="clear:left;"></div>.
Wo ist das Problem werden sich jetzt einige fragen. Ich habe es ja schon fast ausgemerzt. Bei mir funktionert das nun so wie ich es möchte. Allerdings nur im MozillaFirebird und IE, Opera will leider nicht :(
Der Mozilla hat es auf Anhieb richtig gemacht und der IE erst seitdem ich hier
<div style="width:500px;margin-left:200px;border:1px solid #000000;">
das width:500px; hinzugefügt habe (100% geht auch).
Das ist also anscheinend für den IE Grund, nur den zweiten float zu cleaeren und nicht beide. Opera cleared immer beide, Mozilla immer nur den zweiten.
Hat schonmal jemand ein ähnliches Problem gehabt und eventuell einen Tipp, wie es auch im Opera funktioniert?
Danke im Voraus
Matthias