水平和垂直对齐DIV - CSS

Question

我的网页设置如下：

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; }

我想使用CSS和跨浏览器功能按以下顺序排列div个标签：

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

Answer 1

我通过改变div的顺序和设置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/