Align DIVs horizontal and vertically - CSS

Question

I have the following set up for my webpage:

HTML:

<div id="headercontent">
    <div id="topnav"></div>
    <div id="dailycalendar"></div>
    <div id="headerimage"></div>
</div>

CSS:

#headercontent { width: 990px; height: 162px; position: relative; margin: 0 0 0 0; vertical-align: top; padding: 0px; }
#topnav { float: left; width: 720px; height: 50px; }
#dailycalendar { float: left; width: 720px; height: 112px; }
#headerimage { float: right; width: 270px; }

I want the div tags within the following order using CSS and cross browser capability:

----------------- ----------------
-    topnav     - -              -
----------------- -  headerimage -
----------------- -              -
- dailycalendar - -              -
----------------- ----------------

Answer 1

I managed it by changing the order of the divs, and setting a height on headerimage:

<div id="headercontent">
    <div id="headerimage"></div>
    <div id="topnav"></div>
    <div id="dailycalendar"></div>
</div>

#headerimage { float: right; width: 270px; height:100%; background-color:green }

http://jsfiddle.net/pyXer/