nicht angemeldet
äußeres div soll mit inneren mitwachsen
hallo,
ich habe mal eine frage zur positionierung.
ich habe ein alles umschliessendes div mit einem border. darin befinden sich mehrere weitere divs. wenn in diesen eingeschlossenen divs der inhalt so groß wird, daß die mindesthöhe meiner seite überschritten wird, soll der äußere bereich auch mit wachsen. ich habe schon alles mögliche getestet. es klappt auch fast, aber in firefox umschliesst das äußere div nicht alle inneren divs. im IE allerdings mal wieder schon.
wenn jemand von euch da vielleicht einen tipp hätte, wäre das grandios.
der quelltext kommt sofort.
zuvor noch eine weitere mögliche option: spricht generell etwas gegen absolute positionierung? damit komme ich nämlich besser klar und wäre mein wunschdenken. allerdings bekomme ich das oben genannte problem mit dem mitwandern auch nicht hin. den quellcode zu der absoluten version findet ihr bei interesse hier: www.krusenotto.com/test.zip
und hier der code zu der zuerst genannten version: wie gesagt, im IE ist alles gut, im firefox werden nur ein paar divs eingeschlossen vom äußeren. und ein weiterer wunsch wäre, daß das jetzige div "teaser 1+2" in zwei untereinander liegende divs aufgeteilt wird. das habe ich leider nicht geschaft. ich hoffe, ich bin nicht zu unverschämt bei den vielen fragen.
viele grüße und vielen dank im voraus,
cruisi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body style="text-align:center;">
<div style="border:3px solid black; margin-left:auto; margin-right:auto; margin-bottom:auto; margin-top:30px; width:950px; text-align:left;">
<div style="border:1px solid red; float:left; height:100px; width:600px;">Logo div</div>
<div style="border:1px solid green; height:50px; float:left; width:300px;">Topnavi div</div>
<div style="border:1px solid yellow; height:50px; float:left; width:300px;">Suche div</div>
<div style="border:1px solid blue; clear:left; height:30px;">mainnavi</div>
<div style="border:1px solid olive; height:300px; width:200px; float:left;">teaser I + II div</div>
<div style="border:1px solid aqua; height:300px; width:530px; float:left;">content div</div>
<div style="border:1px solid purple; height:300px; width:200px;">teaser III div</div>
</div>
</body>
</html>
-
hi,
ich habe ein alles umschliessendes div mit einem border. darin befinden sich mehrere weitere divs. wenn in diesen eingeschlossenen divs der inhalt so groß wird, daß die mindesthöhe meiner seite überschritten wird, soll der äußere bereich auch mit wachsen. ich habe schon alles mögliche getestet. es klappt auch fast, aber in firefox umschliesst das äußere div nicht alle inneren divs.
Natürlich nicht, weil du die inneren Divs floatest, damit aus dem Fluss nimmst, sie also die Höhe ihrer Vorfahren nicht mehr beeinflussen können ... schon dutzendfach oder mehr hier diskutiert worden.
Abhilfe: Container ebenfalls floaten, oder clearing verwenden, oder overflow:hidden.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
hallo und vielen dank für deine antwort.
hat super geklappt.
viele grüße,
cruisi
-
-
Hi,
ich habe ein alles umschliessendes div mit einem border. darin befinden sich mehrere weitere divs. wenn in diesen eingeschlossenen divs der inhalt so groß wird, daß die mindesthöhe meiner seite überschritten wird, soll der äußere bereich auch mit wachsen. ich habe schon alles mögliche getestet. es klappt auch fast, aber in firefox umschliesst das äußere div nicht alle inneren divs. im IE allerdings mal wieder schon.
ja, dieser IE-Bug ist bekannt.
wenn jemand von euch da vielleicht einen tipp hätte, wäre das grandios.
Das äußere <div> hat ab einem gewissen Punkt keine Inhalte, die für dessen Höhe eine Bedeutung haben könnten: Alles weitere darin ist gefloatet, das umgebende <div> hingegen ist es nicht.
zuvor noch eine weitere mögliche option: spricht generell etwas gegen absolute positionierung?
Nein, sonst wäre sie wohl nicht Teil des Standards. Von ihr ist aber abzuraten, wenn Du ihre Konsequenzen nicht sehr genau kennst.
und ein weiterer wunsch wäre, daß das jetzige div "teaser 1+2" in zwei untereinander liegende divs aufgeteilt wird. das habe ich leider nicht geschaft.
Wenn die Inhalte in zwei verschiedene Elementgruppen gehören, dann lassen sie sich ohne weiteres in zwei <div>-Elemente einfügen.
ich hoffe, ich bin nicht zu unverschämt bei den vielen fragen.
Die Menge der Fragen pro Fragesteller ist in diesem Forum nicht begrenzt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Hat es einen besonderen Grund, weshalb Du in den Quirks-Mode schaltest?
<body style="text-align:center;">
<div style="border:3px solid black; margin-left:auto; margin-right:auto; margin-bottom:auto; margin-top:30px; width:950px; text-align:left;">Die style-Attribute sind hoffentlich nur beispielhaft gemeint und sind im Original ausgelagert.
<div style="border:1px solid green; height:50px; float:left; width:300px;">Topnavi div</div>
<div style="border:1px solid yellow; height:50px; float:left; width:300px;">Suche div</div>
<div style="border:1px solid blue; clear:left; height:30px;">mainnavi</div>Diese drei Elemente sind alle Navigation, sollten also auch als solche gruppiert sein.
<div style="border:1px solid olive; height:300px; width:200px; float:left;">teaser I + II div</div>
<div style="border:1px solid aqua; height:300px; width:530px; float:left;">content div</div>
<div style="border:1px solid purple; height:300px; width:200px;">teaser III div</div>Gleiches gilt hierfür; es scheint mir insgesamt den Content auszumachen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes