Member Avatar for 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>
  • 3 Contributors
  • 2 Replies
  • 98 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

: the behavior you saw in Firefox is the standard CSS "margin collapse" combined with the parent having a fixed height; and were on the right track but the underlying rule is worth calling out so you can pick the right fix.

When a block has no border, no padding, and no inline content separating it from its first child, the child's top margin can collapse with the parent's margin. That makes the child margin appear to "do nothing" inside the parent because the margin is effectively applied outside the parent. This is defined in the spec and explained in detail on MDN and the CSS2 spec:

CSS2 — collapsing margins

Practical, safe fixes (pick one):

Add a non-zero border or padding on the parent to stop collapse:

#main {
  border-top: 1px solid transparent;
}

Create a new block formatting context on the parent (prevents collapse):

#main {
  overflow: auto; /* or overflow: hidden */
}

Use modern layout to isolate the parent:

#main {
  display: flow-root;
}

If the parent has a fixed height, also consider letting it size to content instead of forcing a smaller height (or increase the height) so child height+margin fits:

#main {
  height: auto;
  min-height: 50px;
}

Quick troubleshooting: toggle borders/padding in the inspector to see margin collapse in action, verify a standards doctype (quirks modes change behavior), and test after removing fixed heights. These steps explain why IE7 could look different — older IE had nonstandard handling — while Firefox follows the spec.

Recommended Answers

All 2 Replies

Member Avatar for 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

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.