Child div moves the parent div

HTML & CSS
1

Hi, I’m setting a div inside a div and I want it to work much like a nested table. My code is below, but setting a margin-top on the child div also moves its parent down. What is causing that?

Thanks :slight_smile:


#background { margin:0 auto; width:1024px; background:#FFF url(images/bg.gif) center repeat-y; min-height:400px; } /* content background */
#wrapper { margin:0 auto; width:960px; background:#FFF; min-height:300px; margin-top:10px; margin-bottom:10px; position:relative;}/*Content wrapper*/

  <div id="background">
    <div id="wrapper">
     Testing 123...
    </div>
  </div>
2

Actually, putting a top margin on the child will move the content inside the parent, it’s not moving the parent anywhere. Put borders around them to see it’s like I’m saying.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Border test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

#background { margin:0 auto; width:1024px; background:#FFF url(images/bg.gif) center repeat-y; min-height:400px; border:1px solid red;} /* content background */
#wrapper { margin:0 auto; width:960px; background:#FFF; min-height:300px; margin-top:10px; margin-bottom:10px; position:relative; border:1px solid blue;}/*Content wrapper*/


</style>
</head><body>

<div id="background">
  <div id="wrapper">
   Testing 123...
  </div>
</div>

</body>
</html>
3

Thanks noonnope, you’re right of course :slight_smile:

There is somethine else strange happening then. If I put the border there, the repeating background in the wrapper div starts at the very top of the div, but if I take away the border, it doesn’t start until it gets down to the container div.

4

Hi,
Actually it is starting in the center but whenever you use repeat-y it will turn around and paint backwards too.

Here is an example that shows where the reverse repeat does a partial paint at the very top of the div.

Using background-position with repeat-y

The BG image on the nested div was shifted to the left to show what is going on. :wink:

5

Ah ok thanks. But if it’s repeating from centre, it should go all the way to the top of the div right? On my page, the background is only painting back as far as the top of the nested div which has a top-margin of 10px from its parent.

6

That’s not really correct.:slight_smile: Putting a top margin on the child will in fact move the parent down by that margin due to collapsing margins.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Border test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*{margin:0;padding:0}
#background {
    margin:0 auto;
    width:1024px;
    background:red url(images/bg.gif) center repeat-y;
    min-height:400px;
} /* content background */
#wrapper {
    margin:0 auto;
    width:960px;
    background:blue;
    min-height:300px;
    margin-top:10px;
    margin-bottom:10px;
    position:relative;
}/*Content wrapper*/
</style>
</head>
<body>
<div id="background">
    <div id="wrapper"> Testing 123... </div>
</div>
</body>
</html>

The child’s top margin collapses onto the parent and the parent is moved down as can be seen by the red background. The blue divs margin is gone because it collapsed onto the parent instead.:slight_smile:

Put borders around them to see it’s like I’m saying.

Once you add borders or padding then the model is changed and the margin no longer collapses.

7

It sounds like your #wrapper’s top margin is still collapsing then, did you remove the border from #background?

If you don’t want to use border to un-collapse the child margins you can use padding or overflow:hidden as well.


#background {
    min-height:400px;
    width:1024px;
    margin:0 auto;
    background:#FFF url(images/bg.gif) center repeat-y;
    [COLOR=Red]/*border:1px solid red;*/[/COLOR]
    [COLOR=Blue]overflow:hidden;[/COLOR][COLOR=DarkGreen]/*un-collapse child margins*/[/COLOR]
}
8

That’s the collapsing margin issue I just mentioned above. Add a 1px top and bottom padding to your parent and that will stop the margin collapse.

Edit:

Or overflow:hidden as Ray suggested :slight_smile:

9

Ok, the 1px padding solved it nicely, thanks. Now reading about collapsing margins.

Thanks guys :slight_smile:

10

Thanks Paul. :slight_smile: Always forgetting about that.