title: How this float div is getting top margin when wrapper div has no border?
body: <p>Please note that <em>I am not asking about correcting the problem but instead I want to know</em> how floated div is getting margin when wrapper div has 0px border set. But when wrapper div has 1px border set then floated div doesn't get margin but in both cases secondDiv gets top margin as intended.</p>
  
  <p>Please note that I understand margin collapsing topic but what it has to do with setting border?</p>
  
  <pre><code>&lt;div id="container"&gt;    
      &lt;div id="firstDiv"&gt;FIRST Div inside CONTAINER&lt;/div&gt;
      &lt;div id="secondDiv"&gt;SECOND Div inside CONTAINER&lt;/div&gt;
  &lt;/div&gt;
  
  
  body{
      width: 780px;
      margin: 00px auto;
  }
  #container {
      border: 1px solid orange;   /* but when its set to 0px then floated div gets margin too*/
  }
  #firstDiv{         
      float:left;
  }
  #secondDiv{  
       margin: 14px;        
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/dmpxw/" rel="nofollow">http://jsfiddle.net/dmpxw/</a></p>
  
  <p>Now, if border of wrapper div is set to 0px then floated is pushed downward too. But I think shouldn't it stay there like in previous case?</p>
  
  <p><a href="http://jsfiddle.net/dmpxw/1/" rel="nofollow">http://jsfiddle.net/dmpxw/1/</a></p>