hochakute margin-Problematik

Was soll da nicht klappen?
#infocontainer hat einen oberen Abstand von 15px zum oberen Contentrand.
Wird m.E. (im IE7) korrekt dargestellt.

Das ist mein erster Beitrag hier.
Ich schieß einfach mal los.

Im IE funktioniert das weil #content durch width (und im IE7 auch durch min-height) layout hat.
haslayout gibt es nur im IE5-7.
Ich würde #content ein padding-top:15px; geben und das margin für #infocontainer auf 0 auto setzen:

#content {
    width:1000px;
    background-color:#ffffff;
    margin-top:15px;
    min-height:200px;
[COLOR='DarkRed'][B]padding-top: 15px;[/B][/COLOR]
    }


#infocontainer {
    width:910px;
    margin:[COLOR='DarkRed'][B]0[/B][/COLOR] auto;
    border: 5px solid #5c8b3f;
    background-color: #8cb572;
    }

Für IE5-6 würde ich noch height für #content setzen:

* html #content {
height: 200px;
}

IE5-6 vergrößern die Box trotzdem nach Bedarf.

IE5.x kennt margin-auto nicht. Mit text-align: center; für #infocontainer würden diese Browser auch Blockelemente zentrieren.

Das margin-top von #infocontainer kollabiert (fällt zusammen) wenn es nicht durch ein padding, border oder wie du es gemacht hast; mit einem Inhalt getrennt wird.

Mein Beispiel funktioniert ohne margin-top für #infocontainer.
Du könntest #infocontainer auch mit einem padding oder border von der Außenkannte trennen. Mit eingefärbten body wird es deutlicher:

body {
background-color: #5B5B5B;
}


#content {
    width:1000px;
    background-color:#ffffff;
    margin-top:15px;
[COLOR='DarkRed']padding-top: 1px;[/COLOR] /*oder
[COLOR='#8b0000']border-top: 1px;[/COLOR]*/
    min-height:200px;
    }


#infocontainer {
    width:910px;
    margin:15px auto;
    border: 5px solid #5c8b3f;
    background-color: #8cb572;
    }


/*IE6:*/
* html #content {
  height: 200px;
}