Firefox2.0 and margin-top

[drarock]

Hello I have a div inside other div with a margin-top, it looks good in Ie7 but i have an issue in firefox, it doesn't work the margin-top

/*CSS*/
#main{background-color:#003399; height:50px; margin-top:10px; width:300px;}
 
#child{background-color:#993300; height:50px; margin-top:10px; margin-bottom:10px; margin-right:10px;}
 
/*HTML*/
 
<div id="main">
<div id="child">test</div>
</div>

[MattEvans]

Try using a padding-top:10px for the main div instead of a margin-top:10px for the child div, and a padding-top of 10px on the body instead of a margin-top on the main div.

I can't tell you why it doesn't work; but it doesn't seem to work on Opera either o_O

[MidiMagic]

You didn't leave enough room for the child to fit inside the main.

Unless the margins, borders, and paddings are all set to 0, space is needed for a complete set of these inside the main, but surrounding the child.

When stuff doesn't fit, the browser looks to see where it can steal some pixels to force-fit it. Sledgehammer rendering at work!

Your child object is 70 pixels tall with the margins, and you are trying to cram it inside the main object, which is 50 pixels tall.

It's kind of like all of the department-store Santa Clauses in the world trying to go down the same chimney all at once.