实现两（三）列等高布局的方法

第一种方法：

<style type="text/css">
*{margin: 0; padding: 0;}
#wrap{ padding-left:220px; overflow:hidden;background-color:#0ff;}
*html #wrap{ height:1%;}
#main{ float:right; margin-left:-220px; border-left:220px solid #f00; width:100%;background-color:#0ff; }
#sidebar{background-color:#f00; width:220px; float:right;
margin-left:-220px;/* 宽度大小等于边栏宽度大小*/
}

</style>

html代码：

<div id="wrap">
<div id="main">Main Content</div>
<div id="sidebar">Left Sidebar</div>
</div>

第二种方法：

<style type="text/css">
*{margin: 0; padding: 0;}
#wrap{overflow:hidden;}
*html #wrap{ height:1%;}
#main{ float:right; width:100%;background-color:#0ff;margin-left:-220px;/* 宽度大小等于边栏宽度大小*/}
#sidebar{background-color:#f00; width:220px; }

#main,#sidebar{ margin-bottom:-99999px; padding-bottom:99999px;}

</style>

html代码：

<div id="wrap">
<div id="main">Main Content</div>
<div id="sidebar">Left Sidebar</div>
</div>

优点：

可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器

缺点：

存在一个很大的缺陷，不能很好的实现边框效果。