三栏布局（两栏布局）：侧栏宽度固定，中间的主内容区域宽度自适应
主要原理，对浮动元素设置 负margin = 自身宽度，会使元素上移。
html代码
<div id="content">
<div class="main">
<div class="wrap">main</div>
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
CSS代码
.aside{
width: 50px;
height: 60px;
background-color: red;
}
.extra{
width: 50px;
height: 60px;
background-color: green;
}
.main{
width: 100%;
background-color: #ccc;
height: 100px;
}
设置三个元素浮动，并设置相应元素的负margin后，元素会上移。当然浮动后需要清除浮动，这里不做介绍，详情见BFC博客
CSS代码
.aside{
width: 50px;
height: 60px;
background-color: red;
float: left;
margin-left: -100%;/*父容器的宽度*/
}
.extra{
width: 50px;
height: 60px;
background-color: green;
float: left;
margin-left: -50px;/*容器自身的宽度*/
}
.main{
width: 100%;/*必须设置，浮动后元素宽度会塌陷*/
background-color: #ccc;
height: 100px;
float: left;
}
当然，此时仍有一些问题，比如.main被遮盖住了一部分。
- 对主内容区域设置margin
.wrap{
margin: 0 60px;
background-color: blue;
height: 100%;
}
与圣杯布局的区别在于,html代码中
<div id="content">
<div class="main">
<div class="wrap">main</div>/*difference*/
</div>
<div class="aside">aside</div>
<div class="extra">extra</div>
</div>
