背景
我已经搜索了一段时间的布局，它有960像素的宽度和两列：
- 主要内容：右对齐，宽度550px，从容器右边缘插入
- 边栏：左对齐，宽度为250px，上、左、下边缘与容器齐平
我一直在努力的一点是设置背景，使侧边栏背景占据250px的宽度，100%的父级高度，并与父级的左边缘齐平，留下主要内容来占据父级的剩余宽度和100%的高度。
我看过一些技巧，但它们似乎相对不灵活，例如，尽管它很优雅，但Faux Columns似乎不太合适http://www.alistapart.com/articles/fauxcolumns/.
经过思考，我决定尝试将内容的渲染与背景的渲染分开。具体来说，我将主要内容向右浮动，侧边栏向左浮动，然后是clear:both，这样容器将调整为两列中较大的一列。
接下来，当仍然在容器内但在clear:both之后时，我有两个空的div，它们是绝对定位的，对于带有left:0的侧边栏，高度为100%，宽度为250px，然后对于主要内容，宽度为100%。我还调整了z索引，使侧边栏在前面。
还有其他必要的CSS(例如，容器包装器必须相对定位(，但请参阅下面的源代码。
问题
这与我在Mac Safari上所希望的完全一样，两个背景都根据最高的列展开，并且源中的标记是有效的。然而，我的两个主要担忧是：
- 我不确定这将如何在其他浏览器中呈现，尤其是IE
- 我试着在设计时考虑到SEO，但我对SEO并不太了解，因为我还在学习，这对SEO有多友好
其他来源
如何使浮动div的高度为其父级的100%？
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>
感谢阅读，期待评论！
至于它在IE中的外观，您可以使用Abobe的BrowserLab这样的工具来测试它。
至于SEO：设计对SEO的影响很小，除非你的设计导致你的页面加载缓慢，因为页面加载速度确实会产生影响。像谷歌这样的复杂搜索引擎使用文本在源代码中的位置来表示重要性的日子已经一去不复返了。如今，搜索引擎会分析你页面的实际文本内容，并将其与其他页面的文本内容进行比较。在h1标记中放置一些内容确实向搜索引擎表明，该文本是一个标题，因此比页面上的其他文本稍微重要一些，但如果该文本实际上似乎与对其余文本的分析不相关，我认为他们会抓住这一点，并丢弃h1文本。
如果你的网站几乎没有竞争对手，那么你在页面上所做的事情会对你的排名产生巨大影响，但如果有中等程度的竞争，那么链接到你的页面的内容(以及链接到你页面的页面数量(在你的页面排名中占了很大一部分，以至于你的页面结构绝对没有可衡量的影响。您的页面排名将由其内容与搜索词的相关性决定，并根据匹配的其他页面内容的相对相关性进行加权。这纯粹是关于内容和权威。
所以我真的不会太担心你的页面结构会如何影响搜索引擎排名。只需确保页面加载速度快，并且内容与您想要排名的搜索词尽可能相关。