<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>宽度自适应两列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
height:50px;
background:blue;
}
.main-left{
width:10%;
height:800px;
background:red;
float:left;
}
.main-right{
width:90%;
height:800px;
background:pink;
float:right;
}
#footer{
clear:both;
height:50px;
background:gray;
}
</style>
</head>
<body>
<div id="herder">页头</div>
<div class="main-left">左列</div>
<div class="main-right">右列</div>
<div id="footer111">页脚</div>
</body>
</html>
原文：http://www.cnblogs.com/vk1210/p/5863653.html