利用CSS的三列等高布局
以前自己都是用JS去处理，原来用CSS也是很方便的，可以少写代码^_^
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>三列等高布局</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:Arial;}
#Header,#Footer{margin:0 auto; height:100px; width:800px; background:Red; color:#FFF;} /*关部和尾部样式*/
#Container{width:800px; margin:10px auto; height:1%; overflow:hidden;}/*overflow:hidden可以用来清除浮动，而此处再加上height:1%也是为了解决IE6下光用overflow不能清除浮动的原因*/
#Container div{float:left; display:inline; width:258px; border:1px solid #F60;
background:url(border_bottom.png) repeat-x left 300px #CCC; color:Blue; padding-bottom:9999px;
margin-bottom:-9999px;}/* 左浮动以后再用 display:inline是为了消除IE6的双边距Bug */
#Container div.center{margin-left:10px; margin-right:10px; height:300px;}
#Container div.left{height:300px;}
</style>
</head>
<body>
<div id="Header">我是头部</div>
<div id="Container">
<div class="left">清除浮动可以用 overflow:hidden 或 overflow:auto，<br />在比较标准的浏览器里没有问题，<br />但 IE6 没有效果，为了兼容 IE6 ，<br />可以为父元素：<br />
1、设置一个合适的宽度，<br />但“合适的宽度”有的时候不好掌握；<br />
2、加上 height:1% ，什么都不用管，加上就有效，我还没有发现缺点；<br />
3、加上 zoom:1 ，不能通过W3C验证。</div>
<div class="center">
此处的三列等高布局是利用了CSS的特性，先给容器加上一个很大的padding-bottom再用 margin-bottom负值补回来，而外层（#Container）用overflow:hidden将不显示区域隐藏起来，
因为这些Div我都设了1px的边框，此时你会发现，他们下部的边框没有了，因此还得再做一张1px的图片，作为这些div的背景显示在底部。
</div>
<div class="right">右边</div>
</div>
<div id="Footer">我是底部</div>
</body>
</html>
运行效果：
