The container for filling the content field div

Question

I am facing a problem that really puzzles me.

I have a container in which I want to apply the background to the position located in the upper right corner of the browser screen. Inside the div is the top edge of 4em, and this pushes the div container.

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 edge of the wrapper to be inside the div container, and not outside.

I tried several display properties and position properties to no avail. The only thing that fixes this is to insert "   " before the start of #wrapper, but you need to install the CSS fix for this.

Answer 1

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

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

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

In the context of formatting blocks, each left outer edge touches the left edge of the containing block (for formatting from right to left, touch the right edges). This is true even in the presence of floats (although linear boxes can be reduced due to floats) if the formatting context of the new block is not set in the field (in which case the box itself may become narrower due to floats).

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