Merkwürdiges Verhalten von Container-div
 

Hallo,
ich habe hier ein merkwürdiges Problem mit einer eigentlich einfachen Standardsituation...

Situation: Ein div in einem Container-div (der Footer einer Website). Das innere div hat verschiedene margins, unter anderem nach oben, paddings und ein border-top. Das Container-div hat nur margin:auto und max-width.

Problem: Das Container-div verrutscht nach unten - um den Wert, den das innere div als margin-top hat. Das sollte es aber nicht und es hat auch keinerlei entsprechende Eigenschaften, auch nicht geerbt. Dadurch ist in dem Bereich, den das innere div als margin hat, nicht der Hintergrund des Container-divs zu sehen, sondern der Hintergrund des umgebenden Wrappers.

Lösungsversuche: Entfernen von margin:auto am Container-div. Hat in Bezug auf das Problem nix bewirkt. Entfernen des borders, bewirkt nix. Entfernen der paddings, bewirkt nix. Der fehlerhafte Abstand verschwindet, sobald ich das margin-top des inneren divs entferne, aber das ist ja nicht der Sinn der Sache. Ich habe außerdem versucht, ein weiteres Container-div ohne jegliches CSS einzufügen, auch das hat nicht geholfen.

Falls jemand noch ne Idee hat - ich freu mich über jeden weiteren Lösungsvorschlag. Verstehe gerade echt mal wieder die Welt nicht mehr... :shock:

Hier die Seite, um die es geht, zum Selber-Begutachten: http://web450.highspeed.webhoster.ag/neuesdesign/
Es geht um den Footer, das was ich hier als "inneres div" bezeichnet habe, ist das div mit der id "footer", die beiden Container dann entsprechend "footer-container" und "footer-container2".

Edit: Getestet habe ich das Ganze übrigens mit Chrome 10; im Firefox 4 und IE9 verhält es sich allerdings bei mir genauso. Mir ist außerdem aufgefallen, dass bei der Seitennavigation #page-selector das margin-bottom nicht angezeigt wird. Auch das kann ich mir nicht erklären...

Stichwort collapsing margins

Warum hat dein Footer überhaupt mehr als ein umschließendes Div? Eines reicht vollkommen, die Border kannst du auch der Überschrift geben und für die Innenabstände Padding nutzen.

Danke für den Hinweis bezüglich des überschüssigen divs, hab's jetzt reduziert.

Das margin-Problem habe ich gelöst... den Artikel habe ich, ehrlich gesagt, nicht so richtig verstanden, vor allem, was die dort dargestellte Problematik mit meinem Problem zu tun hat. Geholfen hat's trotzdem, da ich dadurch festgestellt habe, dass meine Vorstellung von margins generell falsch war.

Um die Lösung kurz zu nennen: Die Verschiebung kam vom margin-bottom des page-selectors. Das habe ich entfernt und die gewollte Verschiebung (mit weißem Hintergrund) stattdessen durch padding im footer realisiert.

Die Änderungen sind auf der verlinkten Seite nicht online, da es sich dabei nur um eine Kopie der eigentlichen Seite handelt (das Design ist eigentlich noch nicht online).

ich hab dazu einen Artikel geschrieben, der dir vielleicht ein wenig hilft. ;)

Danke dir, das bestätigt, was ich mir nachts zusammengereimt hatte. Wenn man's weiß, gar nicht so schwierig.