Right div on float: a line appears at the bottom left

Question

Here is my problem.

I have a wrapper div (width: 800 pixels and height: 250 pixels) that contains two divs that occupy all the space in height and divide their width in half.

I installed my css, I float the right div for float: right, and this one appears where it should, but "below" the other, exceeding the space of the shell div (which should not even be possible).

I am posting both jdfiddle and 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 change the div with id rightDiv to div with id leftDiv . What is it.

Here is a WORKING DECISION

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 the left div.

Answer 3

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

Answer 4

Used for this code

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

Demo

Answer 5

try it

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 do not need to float your div to the right - you just need to align each block next to the other, and you can do this using float: left; .

I have made a consistent decision for you. See below:

Using a class to remove the DRY of your code, I grouped your blocks into a common class with the usual behavior.

See the 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 do common things is good practice to avoid redundancy and future problems.

To see how your code works on jsFiddle, just click here .