title: Why can't floated elements set their left and right margins
body: <p>In a wrapper div, the floated elements don't seem to respond to left and right margin settings.  Example:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id ="wrapper"&gt;
      &lt;div id = "content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#wrapper
  {
     width:       1000px; 
     display:         block;
     margin-left:         auto;
     margin-right:    auto;
     overflow:            hidden;
  }
  
  #content
  {
     width:               400px;
     height:              200px;
     display:             block;
     float:               left;
     margin-left:         30px;
  }
  </code></pre>
  
  <p>The #content ignores its left margin setting. Why?</p>