DIV/CSS 布局分析：一栏固定宽度另一栏自适应
本文参考借鉴网上的一些文章，演示如何使用DIV/CSS进行页面布局。这里，我们采用绝对定位(position:absolute)可以让一栏固定，另一栏真正意义上的自适应。最终实现的效果如下：
首先，定义一个容器(为了更直观,每个元素我都设置一个高度值，实际应用中可视情况取auto值):
#box {
width:100%;
height:500px;
margin:0 auto;
background:#f2f2f2;
}
第二步，绝对定位右侧栏，将其固定在右侧：
.right {
width:240px;
height:400px;
background:#FFF;
position:absolute;
right:20px;
top:50px;
}
第三步,定义左侧自适应栏目:
.left {
margin-right:280px;
margin-top:20px;
background:#FFF;
margin-left:20PX;
height:400px;
}
第四步，再为右侧自适应区块加一个子级元素：
.content {
width:96%;
height:300px;
margin:0 auto;
background:#444;
}
最后，看看页面HTML脚本是如何编写的：
<div id="box">
<div class="header">
<span style="color: #fff; font-size: 14px; font-weight: bold; line-height: 28px;">http://forum.entlib.com
- 开源ASP.NET、C#技术交流论坛</span></div>
<div class="left">
<p>
这是左则自适应区块,依显示器分辨率自缩放</p>
<div class="content">
<p>
这是内容区块,相对父元素按百分比适应</p>
</div>
</div>
<div class="right">
<a href="http://forum.entlib.com">
<img src="http://forum.entlib.com/images/entlib.gif" alt="" border="0" /></a>
<p>
绝对定位的右侧栏,固定宽</p>
</div>
<div class="footer">
<p>
footer</p>
All Rights Reserved. 欢迎访问 <a href="http://forum.entlib.com">http://forum.entlib.com</a>
开源ASP.NET、C# 技术交流论坛。
</div>
</div>