三栏布局，左边右边宽度固定，中间自适应
大致思路:左右两列固定宽度，采用绝对定位方式position:absolute;
中间不写定位方式，只要分别设置padding-left以及padding-right分别为左右容器的宽度即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>三栏布局，左边右边宽度固定，中间自适应</title>
<style type="text/css">
body{margin:0; padding:0;}
#left{
border:1px solid #000000;
background-color:#CCCCCC;
width:200px;
position:absolute;
left:0;
top:0;
}
#right{
border:1px solid #000000;
background-color:#CCCCCC;
width:200px;
position:absolute;
top:0;
right:0;
}
#center{
padding-left:202px;
padding-right:202px;
border:1px solid #000000;
background-color:#000;
color:#fff;
}
</style>
</head>
<body>
<div id="left">左边内容</div>
<div id="center">中间内容</div>
<div id="right">右边内容</div>
</body>
</html>
两栏布局，左边宽度固定，右边自适应
实现方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>两栏布局，左边宽度固定，右边自适应</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#wrapper {
width: 100%;
border: 1px solid #333;
margin: 0 auto;
<!–overflow:auto;–>
}
#nav {
width: 200px;
float: left;
}
#content-wrapper {
margin-left: -200px;
float:right;
width: 100%;
}
#content {
margin-left: 200px;
padding: 0 10px;
}
.clearfix:after {
height: 0;
content: ".";
display: block;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="nav">
<p>菜单1</p>
<p>菜单2</p>
<p>菜单3</p>
<p>菜单4</p>
</div>
<div id="content-wrapper">
<div id="content">
<p>
中新网1月12日电(记者贾靖峰)中国银监会有关负责人12日表示，将在风险可控、商业可持续前提下支持保障性住房建设，他并透露，2010年11月末经济适用房开发贷款同比劲增逾三成，经济适用房个人购房贷款则年劲增逾四成，但保障性住房贷款仍存在“风险缓释不足、还款保障难以落实”等问题。
</p>
</div>
</div>
</div>
</body>
</html>
总结方法一：2个div，左侧div宽度固定，右侧自适应浏览器，办法是：对左侧div浮动float：left，并且固定宽度；对于右侧div样式float：right，写一个margin-left：-x；width：100%；然后对右侧div的第一个子内容div写一个margin-left：x；
方法二：如果没有对第一个进行浮动，那么可以进行定位postion：absolute；对于第二个div只需要写margin-left：x 即可了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。