三列自适应宽度液态布局
这是一个三列的自适应宽度液态布局，左拦是主要内容，中栏和右栏为次要内容，可放写导航、链接......,三列均采用百分比来控制。
此文由forestgan于2006-10-25发表，更多文章。
结构部分
<div class="FGSideLeft">
<div class="col"></div>
</div>
<div class="FGSideMiddle">
<div class="col"></div>
</div>
<div class="FGSideRight">
<div class="col"></div>
</div>
FGSideLeft、FGSideMiddle和FGSideMiddle分别为左、中、右三列，因为每列均由百分比来控制的，为了计算方便、不至于出现滚动条和不使用HACKS，所以在容器里再嵌套了个子对象，由它来控制内补丁的值和边框。
表现部分
body{
margin: 1% 1% 1% 2%;
}
div.FGSideLeft{
width: 57%;
float: left;
margin-right: 1.3em;
background: #FFFFFF;
color: inherit;
}
div.FGSideMiddle{
width: 20%;
float: left;
margin-right: 1.3em;
background: #F1F1F1;
color: inherit;
}
div.FGSideRight{
width: 18%;
float: left;
background: #F1F1F1;
color: inherit;
}
div.col{
padding: .5em;
border: solid 1px #CCCCCC;
}
我这里设定三列的宽度一共是95%，加上二个外补丁，总宽度小于100%，为什么不设成100%呢？如果是100%，在某些浏览器里有可能会出现滚动条。
如果你想要三列等高的话，可参阅这篇文章 介绍的方法来实现。
出处:http://www.forest53.com/
