Floated div has a margin that is breaking the flow - css

Question

I have two divs: floated left and floated right. The margin on the right div is breaking the left div, making it appear lower on the page than it should be. I want both divs to touching the top.
HTML:
<div class="right_div">
This div is in the right place.
</div>
<div class="clear"> </div>
<div class="left_div">
This div should be at the top</div>
CSS:
.right_div {
float: right;
margin-right:20px;
margin-top: 20px;
font-weight: 600;
background-color:blue;
}
.left_div{
margin-left: 20px;
margin: 0 0 0 20px;
padding: 0;
background-color: tomato;
text-align: left;
max-width: 10em;
}
.clear {
clear:both;
}
Here is the JSFIDDLE: http://jsfiddle.net/eLSc8/

Answer 1

remove
<div class="clear"> </div>
try this
<div class="right_div">
This div is in the right place.
</div>
<div class="left_div">

Answer 2

remove the
<div class="clear"> </div>
and the red element will stay on top.
As a sidenote, empty markup placed for styling purpose only should be avoided. If you need to apply a float clearing somewhere you should use non-structural approach like easyclearing and modern variants (e.g. see the .clearfix class of html5 boilerplate)

Answer 3

try this
http://jsfiddle.net/eLSc8/1/
please remove this clearboth
<div class="clear"> </div>

Answer 4

As everyone is saying; you can lose the clearing div.
Then simply add a float left to your other div to align it.
Depending on your structure and how you want it positioned, you might need to contain them or add margin. check jsfiddle.net/RSy6F/2/

Answer 5

Is this the desired effect:
http://jsfiddle.net/eLSc8/4/ ?
HTML:
<div class="left_div">This div should be at the top</div>
<div class="right_div">This div is in the right place.</div>
CSS:
.right_div {
font-weight: 600;
background-color:blue;
position: absolute;
top: 20px;
right: 20px;
height: 2.2em;
}
.left_div {
position:absolute;
top: 20px;
left: 20px;
background-color: tomato;
height: 2.2em;
}