I'm trying to apply a 15px/0.938em margin to the top of a nested div, to give it a little breathing room from the top of its parent div (you can see what I'm going for by looking at the gray info bar with the game name and score here).

Instead, it's somehow extending the size of one of its parent divs, as seen here. The green section above the body appears to be getting pulled down/extended. I'm at a bit of a loss, as I didn't expect the most nested child to have that kind of effect on its parent div(s).

Relevant HTML (the wrapper and main divs ARE closed further down in my code):

<div id="wrapper">
        <div id="main">
            <div id="info-bar">

Relevant CSS:

#wrapper { width: 60em; margin: 0 auto; background-color: #fff; }
#main { width: 52.5em; margin: 0 auto; }
#info-bar { width: 36.25em; height: 5.625em; margin-top: 0.938em; background-color: #e2e1e1; }

EDIT: What's really odd is that if I put a border around the wrapper div, everything looks correct. Also, with the error in place (e.g., no border around wrapper), the HANDI-GAMER image/link in the header has a huge outline that stretches into main. This is most likely because it's relatively positioned, but the outline still looks far bigger than both the image and what I'd assume would be the div itself. Curious and frustrating.

Let me know if you want me to post all my code, as I'm feeling it's more likely that my error stems from another part of my code.

1 answer

This was chosen as the best answer

This sounds like a problem with margin collapse...

Try adding padding (padding: 1px 0 0 0; is all you need) to the containing div put simply a margin on a child element needs something to push against. (your border is one option!)

read the technical stuff here: http://complexspiral.com/publications/uncollapsing-margins/

Answered about 8 years ago by Tony Crockford
  • Thanks a bunch, for both a solution and for the link. KevinM1 about 8 years ago