URL: https://www.overclockers.at/coding-stuff/css_div_problem_207932/page_1 - zur Vollversion wechseln!
Moin,
ich habe einen Div Container wo mehrere kleinere Div's mit float:left attribut enthalten sind, nun definiere ich im umfassenden Div Container ein Hintergrundbild, das aber nicht angezeigt wird. Setze ich die Höhe des umfassenden Div's manuell auf z.b. 100 wird mir das Hintergrundbild angezeigt. Wieso wächst dieser Div bei float:left beeinhalteten Divs nicht in der Höhe mit ? wie kann man das lösen ?
danke
Gerrit
bitte (beispielhaften) code posten sonst hat das ganze keinen sinn
CyTrobIc: floating elements und absolute positioned elements verändern nicht die Größe des parent elements. Im Falle der floating elements brauchst du nach allen floating elements einfach nur ein
damit das parent element wächst.Code: PHP<div style="clear:both;"></div>
aber so weit ich weiß wird das auch an dem Problem nix ändern, dass das div in der Größe mitwächst! (zumindest hab ich das Problem einige Zeit lang mit dem Firefox gehabt)
Doch, genau das lässt das element "wachsen", da sich nun ein non-floating div nach allen floating divs befindet. Und daher muss das parent element auch zwangsläufig auf die Größe der Position des clearing divs anwachsen. Man kann das auch ohne clearing div lösen, allerdings ist das dann wieder etwas schwindliger und/oder funktioniert nicht in jedem Browser gleich. Hier gibt es eine Zusammenfassung der Methoden ohne clearing div.Zitat von fatmike182aber so weit ich weiß wird das auch an dem Problem nix ändern, dass das div in der Größe mitwächst! (zumindest hab ich das Problem einige Zeit lang mit dem Firefox gehabt)
Dank dir Spikx werd es nachher mal testen.
Hmm, also bei nem Kollegen wirds jetzt korrekt angezeigt (Firefox 3), bei mir nicht, weder im IE7 noch im Firefox 3... ?
Zitat von CyTrobIcHmm, also bei nem Kollegen wirds jetzt korrekt angezeigt (Firefox 3), bei mir nicht, weder im IE7 noch im Firefox 3... ?
Jo klar... trotzdem nicht.
Beispielcode, hab ich nen Denkfehler ?:
Code: PHP<div style="left: 250px; width: 350px; position: relative;"> <div style="position: relative; width: 350px; background-image: url(termbox_mid.jpg);"> <div style="width: 90px; float: left;">A</div> <div style="width: 240px; float: left;">1</div> <div style="width: 90px; float: left;">B</div> <div style="width: 240px; float: left;">2</div> <div style="width: 90px; float: left;">C</div> <div style="width: 240px; float: left;">3</div> <div style="clear: both;"></div> </div> </div>
Also dein Beispiel-code funktioniert im FF3 und IE7 bei mir.
Mist, jetzt bei mir auch, hatte auf dem Testrechner noch Firefox 1.07 :-/
Daran lags dann, mit dem IE7 geht's aber nach wie vor nicht (nur bei mir).
Ist aber auch egal wenn es bei den anderen läuft, evtl. hat der nen Schuß.
Danke aber nochmal.
overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025