tags:

views:

165

answers:

1

Hi, Im running into an issue that's really baffleing me.

I have a container that I want to apply a background to an postion 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 here is the 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;
}

and heres the 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 "&nbsp;" before the start of the #wrapper but theres got to be a CSS fix to this.

Thanks in Advanced,

Jorge

A: 

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.

gryzzly
Perhaps, you can also add overflow:auto, due to the overflow:hidden's dangerous nature (you may run into problems if you have elements positioned absolutely, or with negative margins.)overflow:auto would be a safer option.
gryzzly
@gryzzly Perfect I used overflow:auto like you said and it worked. This is an issue i had never run into. Thanks.
jef2904
Interesting I read the specification. Should this really be the default behavior for block element to ignore their child's margins? I think it makes more sense to have the parent respect the childs margins instead of collapsing over them... Any thoughts?
jef2904
Parent doesn't ignore the child's margin. Their margins collapse. That means, that between two margin-top values the biggest applies: in my test case (http://jsfiddle.net/kQsPR/1/) it's a child's margin-top:10px (it's bigger than margin-top:0; – a default value for the parent.).It is actually a very helpful feature (margin collapse) that allows you to write more general styling, especially typography oriented. It allows you to preserve vertical rhythm (http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/).
gryzzly