网页布局之圣杯布局

DOM结构：

<div id="header">header</div>
		<div id="container">
			<div id="main" class="column">content</div>
			<div id="left" class="column">left-aside</div>
			<div id="right" class="column">right-aside</div>
		</div>
		<div id="footer">footer</div>

一般我们习惯将main中间主体部分放在最前面，这样我们在使用position定位的时候方便计算左右侧边栏需要移动的距离。

CSS代码块：
可以先将头部和底部设置好，很多布局方法的不同，主要体现在container部分，其余部分实现方法一致。
基本设置如下：

@charset "utf-8";

html,body,div{
	margin:0;
	padding:0;
}
html,width{
	width:100%;
	heigth:100%;
}
#header,#footer{
	background-color:#eee;
	height:80px;
	width:100%;
}

头部和底部设置好后，我们再来设置container部分，圣杯布局的主要思想是将container单做一个盒子，使用padding-left,padding-right将两边空出一定的距离，用以存放左右侧边栏。

#container{
	padding-left:200px;
	padding:right:200px;
}

空出位置后，对main,left,right使用float:left浮动，方便之后的定位

#main,.column{
	float:left;
}
#left,#right{
	width:200px;
	height:300px;
}
#left{
	background-color:red;
}
#right{
	background-color:orange;
}
#content{
	width:100%;
	height:500px;
	background-color:#aaa;
}
#footer{
	clear:both;/*清楚浮动*/
}

效果如下：

到了这一步布局基本已经实现，现在只需要将left,right移动到两端就可以了。在这里使用position:relative定位

#left{
	position:relative;
	margin-left:-100%;
}

效果如下：

因为前面使用了float:left,使得元素浮动，left,right之所以会如图一中换行显示，是因为content占据了main除padding之外的宽度。
最后部分代码如下：

#left{
	position:relative;
	margin-left:-100%;
	left:-200px;
}
#right{
	position:relative;
	margin-right:-200px;
}

效果图如下：

最后可以在中间加一个最小宽度min-width。