CSS div Problem

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/css_div_problem_207932/page_1 - zur Vollversion wechseln!

CyTrobIc schrieb am 07.06.2009 um 13:47

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

vanHell schrieb am 07.06.2009 um 14:44

bitte (beispielhaften) code posten sonst hat das ganze keinen sinn

Spikx schrieb am 07.06.2009 um 15:52

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

Code: PHP

<div style="clear:both;"></div>

damit das parent element wächst.

fatmike182 schrieb am 07.06.2009 um 15:54

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)

Spikx schrieb am 07.06.2009 um 15:56

Zitat von fatmike182
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.

CyTrobIc schrieb am 07.06.2009 um 16:33

Dank dir Spikx werd es nachher mal testen.

CyTrobIc schrieb am 07.06.2009 um 21:11

Hmm, also bei nem Kollegen wirds jetzt korrekt angezeigt (Firefox 3), bei mir nicht, weder im IE7 noch im Firefox 3... ?

Probmaker schrieb am 07.06.2009 um 21:44

Zitat von CyTrobIc
Hmm, also bei nem Kollegen wirds jetzt korrekt angezeigt (Firefox 3), bei mir nicht, weder im IE7 noch im Firefox 3... ?

cache geleert?

CyTrobIc schrieb am 07.06.2009 um 21:48

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>

Spikx schrieb am 07.06.2009 um 21:53

Also dein Beispiel-code funktioniert im FF3 und IE7 bei mir.

CyTrobIc schrieb am 07.06.2009 um 22:01

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.