圣杯布局和双飞翼布局等3栏布局

CSS3ColumnLayout.md

圣杯布局

<div class="container">
    <div class="main"></div>
	<div class="sub"></div>
	<div class="extra"></div>
</div>

body {
	min-width: 600px; /* 2*sub + extra */
}
.container {
	padding-left: 210px;
	padding-right: 190px;
}
.main {
	float: left;
	width: 100%;
	height: 300px;
	background-color: rgba(255, 0, 0, .5);
}
.sub {
	position: relative;
	left: -210px;
	float: left;
	width: 200px;
	height: 300px;
	margin-left: -100%;
	background-color: rgba(0, 255, 0, .5);
}
.extra {
	position: relative;
	right: -190px;
	float: left;
	width: 180px;
	height: 300px;
	margin-left: -180px;
	background-color: rgba(0, 0, 255, .5);
}

双飞翼布局

<div class="main-wrapper">
    <div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>

.main-wrapper {
	float: left;
	width: 100%;
}
.main {
	height: 300px;
	margin-left: 210px;
	margin-right: 190px;
	background-color: rgba(255, 0, 0, .5);
}
.sub {
	float: left;
	width: 200px;
	height: 300px;
	margin-left: -100%;
	background-color: rgba(0, 255, 0, .5);
}
.extra {
	float: left;
	width: 180px;
	height: 300px;
	margin-left: -180px;
	background-color: rgba(0, 0, 255, .5);
}

参考：

In Search of the Holy Grail 浅析圣杯布局和双飞翼布局