Div-Box height

[BK117]

Ja. Also ich weiß nicht wie ich die Frage formulieren soll, daher Schritt für Schritt.
Ich habe eine DIV mit der ID "divBox" und da drin eine DIV mit der ID "center".
Und darin dann eine weitere DIV mit der ID "div".
Hier:
----

----
Und hier die zugehörigen Teile aus der CSS Datei:
----

----
Wenn ich nun der Div mit der ID "center" eine Border gebe, dann sieht man, dass die genau bis zum Ende der DIV mit der ID "div" geht, sich die Höhe also anpasst.

Bei der darüberliegenden "divBox" ist das NICHT der Fall. Da musste ich die Höhe mit (in diesem Fall) 1080px selber angeben. Das Problem dabei ist, dass ich den Text auch mal ändern möchte, und dann soll die Höhe der divBox sich anpassen. Bei der #div geht das ja mit "height: auto;" weil das ja vom Text abhängt. Die darüber liegende Div, die die Box zentriert, passt sich auch an. (Das sieht man halt, wenn man der DIV einen Rahmen gibt).

Nur die #divBox ist dann nur ein Strich, der oben zu sehen ist, wenn man "height: auto;" reinschreibt. Weiß jemand warum? Und wo der Fehler ist, und wie man ihn fixen kann?
Das ist auf dieser Website hier realisiert.
(Der graue Rahmen ist die #divBox, die #center sieht man nicht, würde aber bis zum Ende der weißen #div gehen.)

Vielen Dank,
Gruß Nico

 

[Thallius]

Mach doch mal dein Beispiel auf jfiddle. Das ist viel einfacher dann

 

[BK117]

Hab ich noch nie gemacht. Hab mir das mal kurz angeschaut.
Ist das so korrekt erstellt? Habe die Hintergrundbilder einfach durch irgendwelche Grautöne ersetzt. Ich weiß nicht, wie bzw. ob man da Bilder hochladen kann. Für die original-Version, wo die Bilder vorhanden sind, einfach auf meine Test-Seite gehen: Nico's Startseite
https://jsfiddle.net/j4ffwy2c/

 

[BK117]

Hat keiner 'ne Idee?

 

[stg]

Das floating im folgenden ul-Tag zerschießt dir das...

Setze im CSS für #divbox statt der height einfach mal overflow auf auto:

#divbox {
   overflow: auto;
   ...
}

 

[BK117]

Ok. Danke. Das funktioniert. Allerdings weiß ich noch nicht genau warum. Was hat das floating in der Liste damit zu tun, und was bewirkt overflow jetzt genau, bzw. in wiefern unterscheidet sich das von height?

Vielen Dank,
Gruß BK (schau mal in deine PNs. Habe dir eine wegen der Signatur geschickt ^^)

 

[BK117]

Also. Ich habe folgende Seite gefunden:
https://css-tricks.com/all-about-floats/
Wenn man da bis "The Great Collapse" runterscrollt, findet man das Problem, das ich hatte. Da werden ja auch "Techniques for Clearing Floats" gezeigt, wo ja auch deine Methode mit dem overflow dabei ist. Welche von den gezeigten ist eurer Meinung nach die eleganteste und beste (wenn das überhaupt einen Unterschied macht)?

Danke