Fun with CSS floats - css

Question

I have the following CSS for some DIVs,
#wrapper {
width:960px;
border:1px solid red;
overflow:hidden;
}
#maintitle {
width:600px;
height:50px;
float:left;
border:1px solid #333;
}
#sidebar {
clear:both;
float:left;
width:100px;
height:200px;
border:1px solid #ccc;
}
#rightSidebar {
width:100px;
height:200px;
float:right;
border:1px solid #CCC;
}
I would think the #rightSidebar div would float to the very top right corner of the #wrapper div, however, it's staying below the #maintitle DIV.
The #maintitle DIV is floating to the left, would it then allow the #rightsidebar div to float to the very top right corner?
Here it is in action, http://jsfiddle.net/BdpU7/.

Answer 1

Is this what you had in mind? http://jsfiddle.net/BdpU7/1/
The #rightSidebar needs to go before #sidebar in the HTML, and then #sidebar has to have the clear:
#wrapper {
width:960px;
border:1px solid red;
overflow:hidden;
}
#maintitle {
width:600px;
height:50px;
float:left;
border:1px solid #333;
}
#sidebar {
clear:left;
float:left;
width:100px;
height:200px;
border:1px solid #ccc;
}
#rightSidebar {
width:100px;
height:200px;
float:right;
border:1px solid green;
}
<div id="wrapper">
<div id="maintitle"></div>
<div id="rightSidebar"></div>
<div id="sidebar"></div>
</div>