nicht angemeldet
Firefox: Höhe von Eltern-Elementen bei floatenden Kind-Elementen
Hallo,
das ist sicher schon öfter gefragt worden, aber mir fällt gerade nicht ein, nach welchen Stichworten ich suchen soll ...
Ich habe, vereinfacht gesehen, zwei ineinander verschachtelte Elemente, wobei das Innere per "float:right" am rechten Rand des Äußeren liegt.
Wenn dieses innere Element nun so viel Inhalt hat, dass es nach unten länger wird als das Äußere für seinen sonstigen Inhalt braucht, dann verlängert sich im IE das Äußere automatisch so weit, dass das Innere umschlossen bleibt. Im Firefox dagegen hängt das Innere aber unten über den Rand hinaus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css"><!--
div.aussen {
width:500px;
border: 1px dashed #FF0000;
}
div.innen {
width:200px; float:right;
border: 1px dashed #0000FF;
}
--></style>
</head>
<body>
<div class="aussen">
<div class="innen">
Inneres DIV mit float_right und vielen Zeilen, die das äußere DIV eigentlich nach unten verlängern sollten. Das funktioniert aber nur im IE, nicht im Firefox.
</div>
Äußeres DIV
</div>
</body>
</html>
Kann ich irgend etwas tun, damit das im Firefox auch klappt?
-- snorri
-
hi,
Wenn dieses innere Element nun so viel Inhalt hat, dass es nach unten länger wird als das Äußere für seinen sonstigen Inhalt braucht, dann verlängert sich im IE das Äußere automatisch so weit, dass das Innere umschlossen bleibt. Im Firefox dagegen hängt das Innere aber unten über den Rand hinaus
Ja, genau so ist float definiert - es nimmt Elemente aus dem Fluss, genauso wie bspw. absolute Positionierung.
Der IE macht es hier mal wieder falsch.Kann ich irgend etwas tun, damit das im Firefox auch klappt?
Das Vorfahrenelement selber ebenfalls floaten, oder aber nach dem gefloateten Element den float mittels clear auf einem nachfolgenden, ggf. leeren Block Element wieder aufheben (wenn letzteres zusätzliches Markup erforderlich macht, ist aber ersteres - sofern möglich - vorzuziehen).
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga,
das war wieder mal ein genialer Tipp, danke für die Hilfe!
-- snorri
-