title: Right div on float:right appears a line below the left one
body: <p>Here's my problem.</p>
  
  <p>I have a wrapper div(width: 800px and height: 250px) which contains two divs occupying all the space in height and dividing their width in half.</p>
  
  <p>I set up my css, float the right div to float: right and this one appears where it should but "below" the other one, exceeding the wrapper div space(which shouldn't even be possibile).</p>
  
  <p>I'm posting both the jdfiddle and the code.</p>
  
  <p><strong>JS Fiddle</strong> <a href="http://jsfiddle.net/FV9yC/" rel="noreferrer">http://jsfiddle.net/FV9yC/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;!-- left div --&gt;
      &lt;div id="leftDiv"&gt;
          &lt;h1&gt;This is my heading&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
      &lt;/div&gt;
      &lt;!-- right div --&gt;
      &lt;div id="rightDiv"&gt;
          &lt;h1&gt;This is my heading&lt;/h1&gt;
          &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#wrapper {
      background-color: grey;
      height: 200px;
      width: 500px; }
  
  #leftDiv {
      background-color: purple;
      height: 200px;
      width: 250px; }
  
  #rightDiv {
      background-color: green;
      float: right;
      height: 250px;
      width: 250px; }
  </code></pre>