div content margin pushing container

Question

I'm running into an issue that's really baffling me.

I have a container that I want to apply a background to an position it in the top right of the browser screen. The div inside has a top margin of 4em and this is pushing the container div.

CSS:

#container {
background: transparent url("../images/house-bg.png") top right no-repeat scroll;
}

#wrapper {
    background: #FFF;
    width: 960px;
    height: 600px;
    margin: 4em auto 0;
    border: 10px solid #C3CF21;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -moz-box-shadow: 0 0 25px #444;
    -webkit-box-shadow: 0 0 25px #444;
    box-shadow: 0 0 25px #444;
}

HTML:

<div id="container">
        <div id="wrapper">
            <div id="header">

            </div>
            <div id="main">

            </div>
        </div>
        <div id="footer">
            &copy; Copyright <?php echo date("Y");?> Company, Inc.
        </div>
    </div>

I want the margin of the wrapper to be inside the container div instead of outside.

I've tried multiple display properties and position properties to no avail. The only thing that fixes it is inserting an " " before the start of the #wrapper but there's got to be a CSS fix to this.

Answer 1

You can add overflow:hidden in order to "close" the context within the #container div.

Here, http://jsfiddle.net/kQsPR/ try to remove overflow:hidden and it will behave as you describe.

This behavior is specified here: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

And this is exactly what "overflow" other than "hidden" is capable of (establishing new formatting context), you could also do that by adding border-top to your #container element, for example.