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.