以下是我整理的DIV+CSS常用网页布局技巧，仅供学习与参考！
第一种布局：左边固定宽度，右边自适应宽度
HTML Markup
<div id="left">Left sidebar</div>
<div id="content">Main Content</div>
CSS Code
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#left {
float: left;
width: 220px;
background-color: green;
}
#content {
background-color: orange;
margin-left: 220px;/*==等于左边栏宽度==*/
}
</style>
第二种布局：左边自适应宽度,右边固定宽度
HTML Markup
<div id="wrapper" class="clearfix">
<div id="content-wrapper">
<div id="content">
左边的内容
</div>
</div>
<div id="nav">
右边的内容
</div>
</div>
CSS Code
body {
padding: 0;
margin: 0;
}
#wrapper {
width: 960px;
border: 1px solid #333;
margin: 0 auto;
}
#nav {
width: 200px;
float: right;
}
#content-wrapper {
margin-right: -200px;
float: left;
width: 100%;
}
#content {
margin-right: 200px;
padding: 0 10px;
}
.clearfix:after {
height: 0;
content: ".";
display: block;
clear: both;
visibility: hidden;
}
第三种布局：三栏布局，左右固定，中间自适应宽度
HTML Markup
div class="left">我是left</div>
<div class="right">我是right</div>
<div class="center">我是center</div>
CSS Code
body,div{ margin:0; padding:0;}
div{ height:200px; color:#F00;}
.left{ float:left; width:100px; background:#00f; _margin-right:-3px;}
.right{ float:right; width:100px; background:#0f0; _margin-left:-3px;}
.center{ background:#333; margin:0 100px; _margin:0 97px;}
IE6中的3px间隙bug
在ie6中，我们看到各列之间有一条3px的间隔，这是只有IE6才有的问题。如果中间那列的margin-left和margin-right都为0的话，则只要把左列的margin-right设为-3px,右列的margin-left设为-3px就行了。但如果把中间列的margin-left和margin-right分别为左右两列的宽度时，即使把左列的margin-right设为-3px,右列的margin-left设为-3px也还是没有效果。这时候还得把中间列的margin-left设为左列宽度-3px,margin-right设为右列宽度-3px才行
第四种布局：等高布局，即在实现上述三种布局的同时，还实现左中右区域高度相同（内容不限，以最大高度为准）
body{ padding:0; margin:0; color:#f00;}
.container{ margin:0 auto; width:600px; border:3px solid #00C;
overflow:hidden; /*这个超出隐藏的声明在IE6里不写也是可以的*/
}
.left{ float:left; width:150px; background:#B0B0B0;
padding-bottom:2000px;
margin-bottom:-2000px;
}
.right{ float:left; width:450px; background:#6CC;
padding-bottom:2000px;
margin-bottom:-2000px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">我是left</div>
<div class="right">我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div>
<div style="clear:both"></div>
</div>
</body>
</html>
