Floats not working correctly

Here's my homepage that I've put together http://jsfiddle.net/u5VkN/ and as you can see there is a div called #login-box that is in the wrong place.

Where it's meant to go is to the right of the #signup-box within the #mainFrame.

Any ideas what is up? I think it's my misunderstanding of floats. The div has enough width set for it to sit to the right 开发者_运维百科and it floated to the left so it comes just after #signup-box

Thanks

CSS:

#signup-box{
width: 560px;
height: 250px;
font-size: 18px;
float: left;
clear: both;
}

#login-box{
width: 200px;
height: 250px;
float: left;
clear: both;
}

It's because you have them both set to clear:both,set the #signup-box to clear:left and #login-box to clear:right and you should be fine