Ciao a tutti

Ho un problema con i div, quello che faccio è questo:

<div id="main">
<div id="header">
<div>
<div id="pagina">
<div id="menu">a
</div>
<div id="corpo">a
</div>
</div>
<div id="footer">
</div>
</div>

e nel foglio di stile:

div#main{
width: 900px;
}
div#header
{
background: url(../images/logo.gif) 0px 0px no-repeat;
height: 90px;
text-align: left;
margin-top: 10px;
}
div#pagina{
background-color:#ededed;
}

div#menu{
width: 150px;
float: left;
margin-right: 2px;
margin-left: 2px;
}
div#corpo{
width: 746px;
float: right;
}
div#footer{
background: url(../images/bottom.gif) 0px 0px no-repeat;
height: 35px;
text-align:left;
margin-bottom: 10px;
}


Il problema è che i div compaiono sotto il div header e il div footer viene sotto i div menu e corpo...come mai?

Vi mostro un'immagine per farvi capire meglio Immagine.

Grazie
Valerio