CSS：以奇数顺序浮动DIV？

Question

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

通过一些调整和删除右列（我们的布局不需要），我设法得到如下所示的布局：

问题是，红色区域只是空的，我想让左栏占据整个方面，如下所示：

这就是问题所在。我对浮动有一点了解，但我也知道它取决于它们的放置方式。他们把它们放在这样的顺序中：

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

页眉和页脚之间的所有内容（顶部，左侧，右侧，中间和底部）都包含在包装div中。

这是一般的浮动设置？我不能重新排列DIV顺序，所以我只需要知道是否可以这样做，如果是这样，一些代码就会很棒。

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

谢谢！

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

Answer 2

您可以使用顶部，中间和底部的负边距技巧，具体取决于标记的结构。请参阅http://www.alistapart.com/articles/negativemargins/。