nicht angemeldet
float verschachtelt
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
-
Hi,
Hat schonmal jemand ein ähnliches Problem gehabt und eventuell einen Tipp, wie es auch im Opera funktioniert?
ich hatte vor garnicht mal langer Zeit das Problem der unterschiedlichen Interpretation von 'clear' hier angesprochen und drei Beispiele gezeigt: http://www.1ngo.de/web/clear.html.
Deinen Fall mit zwei linksfloatenden Elementen werde ich wohl noch hierzu nehmen - danke...Mich wundert allerdings, daß der Opera in Deinem Fall wohl der einzige Browser ist, der es _korrekt_ darstellt.
Wenn Du nun aber eine Lösung suchst, empfehle ich Dir mein zweites Beispiel mit float:right; für den zweiten container - hier kommen alle Browser deinem Wunsch zumindest jetzt noch nach.freundliche Grüße
Ingo-
Schonmal Danke für die Antwort.
Wieder ein bisschen Erkenntnis gewonnen dank Deiner Seite. Ich muss mich aber auch zu den Leuten zählen, die es lieber anders hätten und wie es Mozilla handled. Sonst ist das was ich vorhabe ja gar nicht möglich, wenn das Gesamtlayout über floats realisiert wird :(
Da würde ich mir doch für die Zukunft noch wünschen, dass man neben allen vorhergehenden floats auch nur den letzten clearen kann ( clear:last; oder so).
Dein zweites Beispiel mit float:right; hilft leider auch nicht. Ich hab das Beispiel hier nur vereinfacht. In Wirklichkeit gibt es ja noch eine Marginalspalte mit float:right; :-)
Vielleicht noch kurz zur Anwendung:
Es handelt sich hier um ein RedDot Template und der Redakteur soll die Möglichkeit haben, ein Bild links und/oder rechts zu platzieren, welches vom Text umflossen wird.Gruß
Matthias-
Hi,
Dein zweites Beispiel mit float:right; hilft leider auch nicht. Ich hab das Beispiel hier nur vereinfacht. In Wirklichkeit gibt es ja noch eine Marginalspalte mit float:right; :-)
Tja, es gäbe da noch eine Möglichkeit: den linken Bereich absolut positionieren. Da er ja links-oben anfängt, sollte es keine Probleme hinsichtlich unterschiedlicher Fenstergrößen geben.
Dann den rechten Bereich mit float:right setzen und den mittleren Bereich nicht floaten lassen und mit margin nach beiden Seiten auf Abstand halten. Hierin könntest Du dann clear:left ohne Probleme beliebig anwenden.freundliche Grüße
Ingo
-
-