Two divs are causing some alignment issues: one floated left and the other floated right. The margin on the right div is pushing it down, causing the left div to appear lower than desired. I want both divs to be aligned at the top of the page.
HTML:
<div class="right_div">
This div is in its correct position.
</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;
}
For reference, here is the JSFIDDLE link: http://jsfiddle.net/eLSc8/