html - 水平和垂直对齐 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; }

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

----------------- ----------------
-    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/