CSS:以奇怪的顺序 float DIV？

Question

好的，所以我正在尝试为 Amazon WebStore 编写一些 CSS。他们像这样格式化页面:

通过一些调整，并删除右侧的列(我们的布局不需要)，我已经设法获得如下所示的布局:

问题是，红色区域是空的，我想让左栏占据整个边，像这样:

这就是问题所在。我对 float 了解一点，但我也知道这取决于它们的放置方式和顺序。他们按如下顺序排列:

<header divs>
<top divs>
<left divs>
<center divs>
<right divs>
<bottom divs>
<footer divs>

页眉和页脚之间的所有内容(顶部、左侧、右侧、中心和底部)都包含在包装器 div 中。

一般的 float 设置是什么？我无法重新排列 DIV 顺序，所以我只需要知道这是否可以完成，如果可以，一些代码会很棒。

不幸的是，我无法发布任何 HTML 或任何内容，因为您无法访问它。我只需要一个基本的表示，比如这些 div 有这个 float ，这个有这个等等。

谢谢!

Answer 1

仅在 Chrome 中测试过，因此您需要在其他浏览器中查看。

或者，您可以使用 display: table-cell 来完成您想要的，但不会破坏对许多人讨厌的特定浏览器的支持。

JsFiddle: http://jsfiddle.net/6SjEm/

HTML:

<div id="header">HEADER</div>
<div id="top">TOP</div>
<div id="left">LEFT</div>
<div id="center">CENTER</div>
<div id="right">RIGHT</div>
<div id="bottom">BOTTOM</div>
<div id="footer">FOOTER</div>

CSS:

body { font: 20px sans-serif; color: #FFF; text-align: center; }
#header, #footer { background: #000; height: 100px; }
#top, #bottom { background: #333; height: 50px; }
#right { display: none; }

#top { margin-left: 220px; }
#left {
    background: #666;
    float: left;
    height: 300px;
    margin-top: -50px;
    width: 220px;
}
#center { 
    background: #999;
    clear: right;
    height: 100px;
    margin-left: 220px;
}
#bottom { margin-left: 220px; }
#footer { clear: both; }