title: Floated divs are overlapping?
body: <p>Currently, one div is floated - my question is why are two divs overlapping even if the dimensions are set in every one of them? How can I fix this?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div class="wrapper"&gt;
      &lt;div class="block1"&gt;
      &lt;/div&gt;
      &lt;div class="block2"&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS:</strong></p>
  
  <pre><code>.wrapper {border:black solid;width:500px;height:1000px}
  .block1 {width:300px;height:300px;float:right;border:solid red;}
  .block2 {width:300px;height:300px;border:solid green;}
  </code></pre>
  
  <p><strong>jsfiddle here -</strong> <a href="http://jsfiddle.net/FLwUA/1/" rel="nofollow">http://jsfiddle.net/FLwUA/1/</a></p>