普通三列布局

1.采用固定宽度

#wrapper{
	width:800px;
	margin:0 auto;
	background:#999 url(img/1.jpg) repeat-y left top;
}
#header{
	height:100px;
	background-color:#ccc;
}
#nav{
	width:200px;
	background-color:#999;
	float:left;
}
#content{
	float:right;
	background-color:#362219;
}
#bigger{
	width:390px;
	padding:10px 20px;
	float:left;
	background-color:#063;
}
#smaller{
	width:150px;
	padding:10px 10px;
	float:right;
	background-color:#369;
}
#footer{
	clear:both;
	background-color:#333;
}

<div id="wrapper">
	<div id="header">header</div>
	<div id="nav">Direct child ... This is achieved by introducing a new syntax for the selector. Figure 3-20 is an example of a direct child selector.
</div>
	<div id="content">
		<div id="bigger">Direct...hildren of the ele-ment. This is achieved by introducing a new syntax for the selector. Figure 3-20 is an example of a direct child selector.

</div>
		<div id="smaller">Direct child selectors operate much like descendant selectors in that they also ...ildren of the ele-ment. This is achieved by introducing a new syntax for the selector. Figure 3-20 is an example of a direct child selector.

</div>
	</div>
	<div id="footer">foot</div>
</div>

2.采用百分比

#wrapper{
	width:85%;
	margin:0 auto;
	background:#999 url(img/bg.gif) repeat-y 23% 0;
}
#header{
	height:100px;
	background-color:#ccc;
}
#nav{
	width:23%;
	/*background-color:#999;*/
	float:left;
}

#content{
	width:75%;
	float:right;
	background-color:#362219;
	background:#666 url(img/bg.gif) repeat-y 77% 0;
}
#bigger{
	width:66%;
	/*padding:10px 20px;*/
	float:left;
	background-color:#063;
}
#smaller{
	width:31%;
	/*padding:10px 10px;*/
	float:right;
	background-color:#666;
}
#footer{
	clear:both;
	background-color:#333;
}

<div id="wrapper">
	<div id="header">header</div>
	<div style="wraper2">
	<div id="nav">Direct child selectors ...example of a direct child selector.
</div>
	<div id="content">
		<div id="bigger">Direct c...hildren of the ele-ment. This is achieved by introducing a new syntax for the selector. Figure 3-20 is an example of a direct child selector.
</div>
		<div id="smaller">Direct c...selector. Figure 3-20 is an example of a direct child selector.

</div>
	</div>
	<div>
	<div id="footer">foot</div>
</div>