margin vom child hört nicht auf parent

[ChillerT]

Hallo,

habe folgendes Problem, undzwar habe ich 2 Div-Container.
Das Innere ist per margin auto zentriert und soll nun einen margin von 20 px von oben (top) erhalten.

Mein Problem: Er "stößt" sich nicht vom Eltern-Div ab, sondern vom Fensterrand und zeiht dabei das Elternelement mit runter.

float: left würde die Sache regeln, allerdings ist dann die zentrierung schwierig.

Wie kann ich mir hier einfach Abhilfe schaffen?

JSFiddle: Edit this Fiddle - jsFiddle

Vielen Dank im Voraus :)

 

[threadi]

float würde hier gar nichts lösen, da es dir nicht um umfließende Elemente geht. Auch die position-Angaben von dir sind für die Positionierung unnötig und können weg. Eine Lösung wäre, wenn Du dem .parent noch ein padding 20px nach oben gibst.

 

[ChillerT]

Das heißt ohne padding vom Elternelement ist es so nicht lösbar?
Kannst du mir erklären warum der innere Container sich nicht an den Äußeren hält?
Gibts da eine logische Erklärung oder ist das einfach so?

Vielen Dank für deine Antwort.

 

[MrMurphy]

Hallo,

das ist nach den HTML-Vorgaben so gewollt. Stichwort: collapsing margins

Info dazu z. B. unter

http://webdesign-passau.com/wordpress/collapsing-margins/

oder

Cascading Style Sheets { Grundlegendes : Zusammenfallende Abstände (Collapsing Margins) }

oder auch hier

CSS | Michael Wagner Webdesign

Gruss

MrMurphy