How do I position these correctly using float in HTML?

I'm trying to make three sort of blocks using this CSS code:

div#menu {
width:200px;
height:400px;
border:2px ridge white;
text-align:center;
float:left;
margin:4px;
}
div#container {
width:850px;
height:850px;
overflow:auto;
margin:auto;
text-align:center;
border:2px ridge green;
}
div#maincontent {
width:608px;
height:700px;
border:2px ridge white;
text-align:center;
float:right;
top:10px;
margin:4px;
}
div#subcontent {
width:200px;
height:100px;
border:2px ridge white;
text-align:center;
float:left;
margin:4px;
clear:both;
}

The container will hold the entire project/page.

Inside the container the menu will be to the top left corner, and the subcontent box will be directly beneath the menu (bottom left corner). The ma开发者_运维问答incontent box will be in the top right corner, just to the right of the menu/subcontent box.

I've arranged it something like this, in the HTML:

<div id="container">
<div id="menu"></div>
<div id="subcontent"></div>
<div id="maincontent"></div>
</div>

However, when I run that, it makes the top of the maincontent box aligned with the top of the subcontent box top, instead of with the menu.

How would I make it float to the top right, instead of just the right?

http://jsfiddle.net/7zvSu/

Make your mainContent float:left (remove the top property). And position your main content div right after the menu.

css:

div#menu {
    width:200px;
    height:400px;
    border:2px ridge white;
    text-align:center;
    float:left;
    margin:4px;
}
div#container {
    width:850px;
    height:850px;
    overflow:auto;
    margin:auto;
    text-align:center;
    border:2px ridge green;
}
div#maincontent {
    width:608px;
    height:700px;
    border:2px ridge white;
    text-align:center;
    float:left;
    margin:4px;
}
div#subcontent {
    width:200px;
    height:100px;
    border:2px ridge white;
    text-align:center;
    float:left;
    margin:4px;
    clear:both;
}

html

<div id="container">
  <div id="menu"></div>
  <div id="maincontent"></div>
  <div id="subcontent"></div>
</div>

try this, if you want to float right for a block, always place it before the left float blocks

so if you want to float

<div id="maincontent"></div> 

to right, float this first before the float left divs

the following order of divs should work

<div id="container">
<div id="maincontent"></div>
<div id="menu"></div>
<div id="subcontent"></div>
</div>