title: CSS issue with main wrapper div
body: <p>I have no idea why the #mainControldiv div is not being enclosed by it's wrapper div.  Here is the html and css following it:</p>
  
  <p>css:</p>
  
  <pre><code>*
  {
   padding:   0px;
   margin:   0px;
  }
  
  div
  {
   border:   1px solid;
  } 
  
  #mainWrapperdiv
  {
   width:   1000px;
   margin:   0px auto 0px auto;
  } 
  
  #maindiv
  { 
   width:   850px; 
   height:   500px;  
   margin:   50px auto 0px auto;  
   border:   5px solid;
  }
  
  #mainControldiv
  {
   width:   850px;
   height:   150px; 
   margin:   470px auto 0px auto;
   border:   5px solid;
   float:   right;
  }
  
  #moveablediv
   { 
    width:   50px;
    height:   50px;
    background:  lightgreen;   
    position:  relative;
    left:   400px;
    top:   200px; 
   }  
  
  #centerPointdiv
   {
    width:   5px;
    height:   5px;
    background:  black;
    position:  relative;
    left:   22px;
    top:   22px;
   }
  </code></pre>
  
  <p>It should be pretty straight forward, yet i can't figure out why the mainControldiv does not show up within the border of the mainWrapperdiv, it's direct parent.  And can you also tell the logic, or the inner reason why it's not working as I'm expecting, thanks in advance.</p>