背景
我一直在寻找具有 960px 宽度和两列的布局：
- 主要内容：右对齐，宽度550px，从容器右边距插入；
- 侧边栏：左对齐，宽度为 250px，在顶部、左侧和底部边缘与容器齐平；
我一直在努力解决的问题是设置背景，使侧边栏背景占用 250px 宽度，100% 父级高度，并与父级左边缘齐平，让主要内容占用剩余宽度和 100% 高度父母。
我看过一些技术，但它们似乎相对不灵活，例如，虽然它很优雅，但 Faux Columns 似乎不太合适http://www.alistapart.com/articles/fauxcolumns/。
考虑了一下，我决定尝试将内容的渲染与背景的渲染分开。具体来说，我将主要内容向右浮动，侧边栏向左浮动，然后 aclear:both以便容器将调整为两列中较大的一个。
接下来，虽然仍在容器内但在 之后clear:both，我有两个绝对定位的空 div，侧边栏的高度为 100%，宽度为 250px，left:0主要内容的宽度为 100%。我还调整了 z-index 以便侧边栏在前面。
还有其他必要的 CSS（例如容器包装器必须相对定位），但请参阅下面的源代码。
问题
这与我在带有 Safari 的 Mac 上所希望的完全一样，两个背景都根据最高的列展开，并且源代码中的标记是有效的。但是，我的两个主要担忧是：
- 我不确定这将如何在其他浏览器中呈现，尤其是 IE
- 我试图在设计时考虑到 SEO，但我对 SEO 不太了解，因为我还在学习，这对 SEO 有多友好？
其他来源
http://brentgrossman.com/348/not-so-fuax-columns/
（可能还有一些，抱歉不记得了！）
源代码
注意我使用了明亮的颜色和调整过的 div 来更好地说明正在发生的事情。
<!DOCTYPE html>
<html lang="en-US" >
<head>
<title>Test Page</title>
<meta charset="UTF-8"/>
<style>
#main {
}
#main-outer-wrapper {
width: 960px;
margin: 0 auto;
}
#main-inner-wrapper {
background: red;
/* This is the fallback background colour */
position: relative;
/* Must be relative for the background divs to have 100% height and to ensure z-index functions */
z-index: -20;
/* Ensure fallback background is below all other divs */
}
#main-content {
/* This is where all the actual content will be */
width: 550px;
float: right;
/* IMPORTANT float */
background: orange;
/* Background would actually be transparent, here it is for illustration */
margin: 10px 80px 10px 10px;
/* Keep content away from edges as part of design only*/
}
#left-primary-sidebar {
/* This is for the actual sidebar content */
float: left;
/* IMPORANT float */
background: green;
/* Again, background colour is purely for illustration */
width: 230px;
margin: 10px;
/* I have adjusted the margin for illustration only, in situ width is 250px and margin is 0 */
}
#main-content-background {
/* This div has no content */
background: blue;
/* The intended right column background */
/* Position MUST be absolute so that the div can
* have its height based on parent container, using
* top and bottom. Width can be specific but I have
* set it to 100% for maintainability */
position: absolute;
width: 100%;
right: 0;
top:0;
bottom: 0;
z-index:-10;
/* As width is 100%, it is important that this is placed below the sidebar */
}
#left-primary-sidebar-background {
/* As above regarding position */
background: purple;
position: absolute;
width: 250px;
left: 0;
top:0;
bottom: 0;
z-index:-9;
/* Div must be above right column */
}
.clear {
clear: both;
}
</style>
</head>
<body>
<section id="main">
<div id="main-outer-wrapper" class="wrapper outer-wrapper">
<div id="main-inner-wrapper" class="wrapper inner-wrapper">
<section id="main-content">
<div id="main-content-wrapper" class="wrapper">
Content
</div><!-- #main-content-wrapper -->
</section><!-- #main-content -->
<section id="left-primary-sidebar">
<div id="left-primary-sidebar-wrapper" class="sidebar">
Sidebar
</div><!-- #left-primary-sidebar-wrapper -->
</section><!-- #left-primary-sidebar --> <div id="main-content-background"></div>
<div id="left-primary-sidebar-background"></div>
<div class="clear"></div>
</div><!-- #main-inner-wrapper -->
</div><!-- #main-outer-wrapper -->
</section><!-- #main -->
</body>
</html>
感谢阅读，期待评论！