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

Thanks in Advanced,

Jorge