Right div on float:right appears a line below the left one

Question

Here's my problem.

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.

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).

I'm posting both the jdfiddle and the code.

JS Fiddle http://jsfiddle.net/FV9yC/

HTML

<div id="wrapper">
    <!-- left div -->
    <div id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
    <!-- right div -->
    <div id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>

CSS

#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; }

Answer 1

Just shift the div with ID rightDiv above the div with ID leftDiv. That's it.

Here is the WORKING SOLUTION

The Code:

<div id="wrapper">
    <!-- right div -->
    <div id="rightDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>    
    <!-- left div -->
    <div id="leftDiv">
        <h1>This is my heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
</div>