title: div content margin pushing container
body: <p>I'm running into an issue that's really baffling me.</p>
  
  <p>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. </p>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;div id="wrapper"&gt;
              &lt;div id="header"&gt;
  
              &lt;/div&gt;
              &lt;div id="main"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              &amp;copy; Copyright &lt;?php echo date("Y");?&gt; Company, Inc.
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I want the margin of the wrapper to be inside the container div instead of outside.</p>
  
  <p>I've tried multiple display properties and position properties to no avail. The only thing that fixes it is inserting an "<code>&amp;nbsp;</code>" before the start of the #wrapper but there's got to be a CSS fix to this.</p>