title: css div margin moving entire div instead of content
body: <p>i have:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;&lt;div id="left"&gt;&lt;div class="box"&gt;blahblah&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.box  {
      height: 200px;
      width: 300px;
      margin: 50px;
      background:url(box.png) no-repeat } 
  #container{
      width:100%;
  }
  #left{
      float:left;
      width: 260px;
      height: 600px;
  }
  </code></pre>
  
  <p>When i add <code>margin: 25px;</code> to the .box class, it moves the entire box div across the page.
  What should i do in order to margin the content (blahblah) within the div (.box)?</p>