title: Margin collapse not working
body: <p>I am trying to create some layout but I have a problem. I know margin collapse concept so 
  I used this html code</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="left"&gt;&lt;/div&gt;
    &lt;div class="right"&gt;&lt;/div&gt;    
  &lt;div&gt;
  </code></pre>
  
  <p>this is my css code</p>
  
  <pre class="lang-css prettyprint-override"><code>.container{
    width:1080px;
    margin:0 auto;
    background:red;
    overflow:hidden;
  }
  
  .left{
     background:yellow;
     width:510px;
     height:200px;
     float:left;
     margin:20px;
  }
  
  .right{
     background:blue;
     width:510px;
     height:200px;
     float:right;
     margin:20px;
  }
  </code></pre>
  
  <p>but my code is not working. I have above output but I want to get two div inline   <a href="http://jsfiddle.net/Cp2Bq/" rel="nofollow">http://jsfiddle.net/Cp2Bq/</a></p>
  
  <p>So i want to know why margin collapse is not working in my code.</p>