required for empty divs?

Hello there…

I just encountered an awkward error:
An empty div which has margin-top steals the background from an underlaying div??? To avoid the unwanted shifting only filling the empty div helps. Its just like back in the days with tables… I didnt know, its the same with divs, or is it?

Am I doing something wrong here? Is that kind of behavior intended???
Please could someone explain?

Thank you!

<head>
<style type="text/css">
body {
    margin:0;
    padding:0;
    background: #ddd;
}

#content {
    background: #777;
    width: 500px;
    height: 700px;
    margin: 0 auto;
}

div#window {
    width: 400px;
    height: 500px;
    background: #fff;
    margin: 100px 50px;
}
</style>
</head>
<body>

<div id="content">
    <div id="window">
    window
    </div>
</div>

</body>

VS

<head>
<style type="text/css">
body {
    margin:0;
    padding:0;
    background: #ddd;
}

#content {
    background: #777;
    width: 500px;
    height: 700px;
    margin: 0 auto;
}

div#window {
    width: 400px;
    height: 500px;
    background: #fff;
    margin: 100px 50px;
}
</style>
</head>
<body>

<div id="content">
&nbsp;
    <div id="window">
    window
    </div>
</div>

</body>

Hi, Welcome to SitePoint :slight_smile:

What you have just ran into there is known as “Collapsing Margins”

It’s a tricky subject for some people to get a grasp on but once you recognize it you will know what is going on.

You can un-collapse the child margins by setting top/bottom padding or borders on the parent. Or (as I do frequently) you can use overflow:hidden; on the parent if you do not have any content hanging out.


#content {
    background: #777;
    width: 500px;
    height: 700px;
    margin: 0 auto;
    [COLOR=DarkGreen]/*padding-top:1px;[/COLOR][COLOR=DarkGreen]/*un-collapse child margins*/[/COLOR]
    [COLOR=Blue]overflow:hidden;/*un-collapse child margins*/[/COLOR]
}

Hey! Thanks for the warm welcome!

I knew it - there’s some sense in there :wink:

ok , i’ll dig into that… collapsing-margins-thingy :lol:
thank you!
AO

ok just to get this over with:

Thanks to my colleague “Timon” I thoroughly solved this conundrum. The important part can be found at http://www.w3.org/TR/CSS21/box.html#collapsing-margins where it says:

The bottom margin of an in-flow block-level element is always adjoining to the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

The top margin of an in-flow block box is adjoining to its first in-flow block-level child’s top margin if the element has no top border, no top padding, and the child has no clearance.

The bottom margin of an in-flow block box with a ‘height’ of ‘auto’ is adjoining to its last in-flow block-level child’s bottom margin if the element has no bottom padding or border.

I’d say case closed :smiley:

That was also covered in the article Ray pointed to but glad you got it sorted anyway from the source:) (and welcome to Sitepoint from me also:))

For a full understanding of margins you need to also know about clearing and negative margins as there are some gotchas in there also.

If you have time to spare here’s a few [URL=“http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/”]examples that provide some graphical [URL=“http://www.search-this.com/2007/09/05/lets-be-clear-about-this/”]examples to make it easier to see what’s going on.

Hi

oh I didn’t mean to depreciate Rays effort in any way. When I had a look at Rays link it just didnt jump right at me. But of course I am very thankful to Ray, too, since he actually gave the important “collapsing margins” advice.

have a nice day
AO

Sorry, I didn’t mean it to sound like that lol :slight_smile: