佈局一，兩欄佈局，側欄固定在右邊，左邊主欄寬度自適應，效果如下：

code: 

<div class="layout">
	<div class="layout_main"></div>
	<aside class="layout_aside"></aside>
</div>

.layout{
	padding-right: 210px;
}
.layout_aside {
	width: 200px;
	background: #ccc;
	margin-right: -210px;
	float: right;
	height: 100px;
}
.layout_main {
	width: 100%;
	background: #888;
	float: left;
	height: 100px;
}
.layout:after {
	clear: both;
	content: " ";
	display: table;
}
 

code: 

	<div class="layout">
		<aside class="layout_aside"></aside>
		<div class="layout_main"></div>	
	</div>

.layout{  
    padding-left: 210px;  
}  
.layout_aside {  
    width: 200px;  
    background: #ccc;  
    margin-left: -210px;  
    float: left;  
    height: 100px;  
}  
.layout_main {  
    width: 100%;  
    background: #888;  
    float: right;  
    height: 100px;  
}  
.layout:after {  
    clear: both;  
    content: " ";  
    display: table;  
} 
 

佈局三：三欄佈局，兩邊側欄固定，中間主欄寬度自適應，效果如下：

code:

	<div class="layout">
		<aside class="layout_aside aside_l"></aside>
		<div class="layout_main"></div>
		<aside class="layout_aside aside_r"></aside>	
	</div>

.layout{
	padding: 0 210px;
}
.layout_aside {
	width: 200px;
	background: #ccc;
}
.aside_l{
	margin-left: -210px;
}
.layout_main {
	width: 100%;
	background: #888;
}
.layout_aside, .layout_main {
	height: 100px;
	float: left;
}
.aside_r{
	margin-right: -210px;
	float: right;
}
.layout:after {
	clear: both;
	content: " ";
	display: table;
}
 

佈局四：3欄佈局，2個側欄同時固定在左邊，右邊是主體內容欄，效果如下：

	<div class="layout">
		<aside class="layout_aside aside_first"></aside>
		<aside class="layout_aside aside_last"></aside>
		<div class="layout_main"></div>	
	</div>

.layout{
	padding-left: 420px;
}
.layout_aside {
	width: 200px;
	background: #ccc;
}
.aside_first{
	margin-left: -420px;		
}
.aside_last{
	margin-left: -210px;
}
.layout_main {
	width: 100%;
	background: #888;
}
.layout_aside, .layout_main {
	float: left;
	height: 100px;
}
.layout:after {
	clear: both;
	content: " ";
	display: table;
}

佈局五：3欄佈局，2個側邊欄同時固定在右邊，左邊是主體內容欄自適應，效果如下：

code:

	<div class="layout">
		<div class="layout_main"></div>
		<aside class="layout_aside aside_first"></aside>
		<aside class="layout_aside aside_last"></aside>	
	</div>

.layout{
	padding-right: 420px;
}
.layout_aside {
	width: 200px;
	background: #ccc;
}
.aside_first{
	margin-right: -420px;		
}
.aside_last{
	margin-right: -210px;
}
.layout_main {
	width: 100%;
	background: #888;
	float: left;
	height: 100px;
}
.layout_aside {
	height: 100px;
	float: right;
}
.layout:after {
	clear: both;
	content: " ";
	display: table;
}