CSS float help

["nowherecreative" <webforumsuser@xxxxxxxxxxxxxx>]

I'm making the transition from designing with tables to designing with CSS. I 
am having an issue getting my float right divs to line up with the rest of the 
content. For example, if my #main-nav id stretches lengthwise it pushes all of 
the floats down, but I need them to line up (like the top of the navigation bar 
and the top of the #reservations ID). I'm not sure how to do this so I've 
attached the CSS code to see if anyone can help. I'm just working with blocks 
of color right now to establish the layout so it is super simple.

 }
 html, body {
        margin: 0;
        padding: 0;
 }
 #page-container {
        width: 800px;
        margin: auto;
 }
 #top-nav {
        background: red;
        height: 50px;
 }
 #main-nav-top {
        background: blue;
        height: 25px;
        width: 210px;
 }
 #main-nav {
        background: green;
        width: 200px;
 }
 #reservations {
        float: right;
        background: yellow;
        width: 600px;
        height: 40px;
 }
 #flash {
        float: right;
        background: purple;
        width: 600px;
        height: 320px;
 }
 #sub-nav {
        float: right;
        background: pink;
        width: 600px;
        height: 40px;
 }
 #header {
        float: right;
        background: red;
        width: 600px;
        height: 75px;
 }
 #content {
        float: right;
        background: blue;
        width: 600px;
 }
 #side-footer {
        background: lightblue;
        width: 200px;
        height: 40px;
 }
 #content-footer {
        float: right;
        background: darkgreen;
        width: 600px;
        height: 40px;
 }
 #footer {
        clear: both;
        background: orange;
        height:100px ;
 }