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

#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;}
<div id="main">
<div id="child">test</div>
11 Years
Discussion Span
Last Post by MidiMagic

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


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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.