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

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>

Answer 2

http://jsfiddle.net/FV9yC/1/
You should add float: left to your left div.

Answer 3

Add float: left to the other div. Also you can use float: left for both; unless you have other reasons than just positioning there to use it.

Answer 4

Used to this code
#leftDiv{float:left;}
#wrapper:after{
content:"";
clear:both;
display:table;
}
#wrapper {
height:200px; // remove this line
}
Demo

Answer 5

try this
http://jsfiddle.net/FV9yC/5/
#wrapper {
background-color: grey;
height: 200px;
width: 500px;
}
#leftDiv {
background-color: purple;
height: 200px;
width: 250px;
float:left;
}
#rightDiv {
background-color: green;
float: right;
height: 250px;
width: 250px; }

Answer 6

You don't need to float your div to the right — you just need to align each block beside the other, and you can do this using float: left;.
I made a consistent solution for you. See below:
Using a class to remove the DRY of your code, I grouped your blocks into a common class with common behaviors.
See your new CSS:
#wrapper {
background-color: grey;
height: 200px;
width: 500px; }
.block {
float: left;
width: 250px;
}
#leftDiv {
background-color: purple;
height: 200px; }
#rightDiv {
background-color: green;
height: 250px; }
And your new HTML:
<div id="wrapper">
<!-- left div -->
<div class="block" id="leftDiv">
<h1>This is my heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<!-- right div -->
<div class="block" id="rightDiv">
<h1>This is my heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
Using classes to execute common behaviors it is a good practice to avoid redundancy and future problems.
To see your code working on jsFiddle, just click here.