Divs not floating as expected in the sidebar - css

Question

I have searched about the topics of how to float divs next to each other and tried those.
First let me show what I am planning to design
I have created content and sidebar and made the sidebar flow right. Again in my sidebar I am making the sidebar div 1 and sidebar div 2 to float side by side. In my CSS im making the sidebar div 2 to float right, it is floating right but exactly below sidebar div 1 as shown in below figure
I know this may sound simple, but still Im missing something important. Would be grateful if somebody points this out.
Here is the code for the sidebar and the divs
#sidebar {
width: 720px;
float: right;
margin: 60px 0 30px;
}
.div1{
width: 200px;
}
.div2{
float: right;
width: 300px;
}
Thanks
Raaks

Answer 1

This is typical float problem - float both divs left not right OR change the order - div2 before div1.
.div1{
width: 200px;
float:left
}
.div2{
float: left;
width: 300px;
}
and clear right after the divs.

Answer 2

Ok. So your 'div1' even with specific width will be displayed as block width inherited width and with clear both sides until you will not set it float too. Either set it display: inline[-block].

Answer 3

Like #Circadian said, hard to say without the HTML/CSS but try:
.div1{
float:left;
width:200px;
}
.div2{
clear:both;
float:right;
width:300px;
}
Using the 'clear' property allows you to clear out elements on the left, right or both.
Actually, if you float them left and right you may not need the clear property. If both are floated left and you want them to appear one below the other, the clear property should be used. Otherwise float both elements left and add a margin-right to the first div to add some spacing.