title: why are the margins for some divs?
body: <p>I need help explaining why the margins are applied to the bottom two boxes in the wrapperdiv and not the top big box.  Example</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id = "mainWrapperdiv"&gt; 
      &lt;div id = "maindiv"&gt;  
          &lt;div id = "moveablediv" &gt;
              &lt;div id = "centerPointdiv"&gt;&lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt; 
      &lt;div id = "animationsdiv" class = "controls"&gt;&lt;/div&gt;
      &lt;div id = "optionsdiv" class = "controls"&gt;&lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>*
  {
      padding:        0px;
      margin:         0px;
  }
  
  div
  {
      border:         1px solid;
  }   
  
  #mainWrapperdiv
  { 
      width:          1000px; 
      display:        block;
      margin-left:    auto;
      margin-right:   auto;
  }     
  
  /**** CSS approach to forcing the main containter div to include it's floated elements *****/   
  #mainWrapperdiv:after
  {
      content:            ".";
      display:            block; 
      clear:              both; 
      height:             0px; 
      visibility:         hidden;
  }   
  /***** end main containter div including floated elements **********************************/ 
  
  #maindiv
  {  
      width:          850px;  
      height:         500px;  
      border:         5px solid; 
      margin:         30px 0px 30px 70px; 
      float:          left;
  } 
  
  div.controls 
  { 
      width:          400px; 
      height:         200px; 
      border:         5px solid;    
      margin:         20px 20px 10px 70px;
      float:          left;
  }
  </code></pre>
  
  <p>So is the margins for the bottom boxes being applied, when the top big box ignores the left and right margins?  </p>