1.固定两栏布局，使用float，注意对紧邻元素清除浮动影响。IE6在使用float布局同时设置横行margin的情况下会有双边距BUG，解决方案是加入_display:inline
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>横向两列布局</title>
<style type="text/css" >
body{
padding:0;
margin:0;
}
.wrapper{
width: 960px;
margin:0 auto;
}
.header {
height: 75px;
background-color: #BD9C8C;
margin-bottom: 5px;
}
.left{
width: 340px;
height: 600px;
margin-right: 20px;
_display:inline;/*IE6双边距BUG*/
float: left;
background-color:#E7DBD5;
}
.right{
width: 600px;
height: 600px;
_display:inline;/*IE6双边距BUG*/
float: left;
background-color: #F2F2E6;
}
.footer {
clear: both; /*清除浮动，非常重要，不可缺少*/
background-color: #BD9C8C;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Header</h1>
</div>
<div class="left">
<h2>left</h2>
</div>
<div class="right">
<h2>right</h2>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div> </body>
</html>
2.左侧定宽，右侧自适应
方法一：
right相对父元素使用absolute定位并设置margin-left，需要注意：固定宽的列的高度>自适应宽度列的高度
代码如下：
方法二：
float和overflow配合可实现两列自适应效果，兼容IE6-浏览器需要设置zoom:1
.container{
overflow: hidden;
}
.left{
margin-right: 20px;
float: left;
width: 340px;
height: 500px;
background-color:#E7DBD5;
}
.right{
overflow: hidden;
background-color: #F2F2E6;
}