早在工作中，写一些图片列表时候就有的这种感觉。怎么写的呢？一个li，里面img左浮动，其他内容不变，即可形成左侧缩略图，右侧描述信息的样子，看这个图：
左右两栏内容图例
结构类似于<img /> <div>introduction</div>，如果在firebug下看，可以发现div区域是包括img区域的，但是内容会环绕图片。div不设置宽度，此时div是和父级元素（li）是一样宽度的。一次偶然我随手给div加了个overflow:hidden,发现div覆盖区域适应了内容宽度，不再包含img区域了。然后用zoom:1的设置使IE也达到此效果。IE6有点瑕疵，div和img会有空白相隔。
而本文就是来源于此发现，从而很容易的实现3栏布局：两侧栏固定宽度，中间自适应宽度。无需其他说明，看代码就一切明了了。
html:
<body>
<div class="side fl">
左侧栏
</div>
<div class="main">
<div class="side fr">
右侧栏
</div>
<div class="main">
中间自适应
</div>
</div>
</body>
css:
.fl, .fr {float:left;display:inline;}
.fr{float:right;}
.side {width:200px;height:500px;background:#ccc;}
.main {height:500px;overflow:hidden;zoom:1;border:1px solid red;}
是的，就是这么简单简洁的代码，点击这里可以看到Demo。
再来一个完整页面源码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>两侧固定宽度，中间自适应宽度布局</title>
<style type="text/css">
#left {float:left;width:200px;background:red}
#main, #mid {overflow:hidden;zoom:1;background:green}
#right {float:right;width:200px;background:pink}
</style>
</head>
<body>
<div id="left">left</div>
<div id="main">
<div id="right">right</div>
<div id="mid">center</div>
</div>
</body>
</html>
http://cssor.com/3-columns-layout-for-side-cols-fixed-width.html