侧栏定宽，主栏宽度自适应且优先载入

需求

两列布局，左栏宽度固定为200px，右栏宽度自适应且优先载入；
两列间距为10px；
两列高度不确定。

方案1

html

<div id="content">
	<div id="main">主栏</div>
	<div id="sidebar">侧栏</div>
</div>

css

#content {
	padding-left: 210px;
}
#main {
	float: right;
	width: 100%;
}
#sidebar {
	float: left; _display: inline; /* IE6 Bug */
	width: 200px;
	margin-left: -210px;
}

查看demo

方案2

#content {
	display: box;
	box-direction: reverse;
}
#main {
	box-flex: 1;
}
#sidebar {
	width: 200px;
	margin-right: 10px;
}

注：实际应用中需要加上-moz和-webkit前缀，在此省略，以便示例代码的清晰。

分析

主栏需要优先载入，那么在html中两块内容的顺序就确定了，main要放置于sidebar前面。

两块内容并列放置，通常会用浮动或绝对定位来实现，绝对定位实现很方便，需要固定宽度的侧栏绝对定位，主栏写一个margin-left就OK。但这个需求中有一个“两列高度不确定”，有可能sidebar比main更高，如果sidebar绝对定位了，它就会脱离普通文档流，其后的内容不会随着它而流动。“两列高度不确定”也就意味着它们都要处于普通文档流当中。

如果用浮动呢？元素浮动后其宽度会自动收缩到最小，那么main浮动后，需要使其宽度自适应就只能依赖于父元素了，所以这里添加一个额外的div（#content），并设置其padding-left值为侧栏宽度以限制main的宽度范围，接下来定义sidebar的margin-left为负值让其与main并列显示。

对于这类弹性布局，CSS3的Flexible Box Layout当然是更好的选择，如方案二，Gecko和WebKit已提供了对它的支持。