title: Margin-top of not working on unfloated element
body: <p>I have a parent div <code>#modal_share</code> that contains a floating div <code>modal_big_hline</code> and a unfloated div <code>modal_big_button_container</code> (with <code>clear: both</code>). </p>
  
  <p><code>modal_big_button_container</code>'s CSS is created to allow it to be the width of the parent div minus 25px on its left and right sides.</p>
  
  <p><strong>Problem:</strong> Changing the <code>margin-top</code> of <code>modal_big_button_container</code> does not cause it to shift up/down, instead it remains in the same position, although its margin can be seen to be changing using Chrome's developer tools.</p>
  
  <p>Why is this happening, and how can I solve this? Thanks!</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#modal_share {
      width: 565px;
      height: 400px;
      position: relative;
      background: whiteSmoke;
      padding-top: 10px;      
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-box-shadow: 0px 3px 16px #222;
      -moz-box-shadow: 0px 3px 16px #222;
      box-shadow: 0px 3px 16px #222;
      display: none;  
  }
  
  .modal_big_hline {
      width: 100%;
      height: 1px;
      margin-top: 25px;
      border-top: 1px solid #CCC;
      float: left;
  }
  
  #modal_big_button_container {
      height: 14px;
      width: auto;
      margin: 10px 25px 0px 25px;
      clear: both;
  }
  </code></pre>
  
  <p><strong>HTML Structure</strong></p>
  
  <pre><code>&lt;div id="#modal_share"&gt;
      &lt;div class="modal_big_hline"&gt;&lt;/div&gt;
      &lt;div id="modal_big_button_container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/5LG2w/" rel="nofollow">http://jsfiddle.net/5LG2w/</a></p>