等高列布局

方法一：背景图片法

<div class="container clearfix">
    <div class="left"></div>
    <div  class="content"></div>
    <div class="right"></div>
</div>

.container {
	background: url("column.png") repeat-y;
	width: 960px;
	margin: 0 auto;
}
.left {
	float: left;
	width: 220px;
}
.content {
	float: left;
	width: 480px;
}
.right {
	float:left;
	width: 220px;
}

优点：
        实现方法简单，兼容性强，不需要太多的css样式就可以轻松实现。
缺点：
        使用这种方法不适合流体布局等高列的布局，另外如果你需要更换背景色或实现其他列数的等高列时，都需要重新制作过背景图。

方法二：边框模拟

<div id="container">
	<div class="mainBox"></div>
	<div class="sideBox">侧边栏</div>
</div>

#container {
	position:relative; /* 为其子元素的定位具有可参照的对象 */
	width:960px;
} /* 设置页面内容区域的宽度为960px */
.mainBox {
	width:680px;
	color:#FFFFFF;
	border-right:280px solid #AAAAAA; /* 将边框的宽度值设置与侧边栏的宽度相同，并用边框色“取代”侧边栏的背景色 */
	background-color:#333333;
}
.sideBox {
	position:absolute;
	top:0;
	right:0; /* 使用定位方式将侧边栏绝对定位在内容区域的右上方 */
	width:280px;
	color:#FFFFFF;
}

优点：
        结构简单，兼容各浏览器，容易掌握。
缺点：

• 只能将侧边栏（sideBox）或者主要内容区域（mainBox）的背景设置成单色，无法使用背景图片
• 边框色需要设置在侧边栏（sideBox）或者主要内容区域（mainBox）中
• 定位后的部分，无论是侧边栏（sideBox）还是主要内容区域（mainBox）的高度都不能大于另外一个非定位的部分高度，否则无法撑开容器的高度。

方法三：正padding和负margin方法

<div id="container">
	<div class="mainBox"></div>
	<div class="sideBox">侧边栏</div>
</div>

#container {
	width:960px;
	overflow:hidden;
} /* 设置页面内容区域的宽度为960px */
.mainBox {
	float:left; /* 将主要内容区域向左浮动 */
	width:650px;
	background-color:#333333;
}
.sideBox {
	float:right; /* 将侧边栏向右浮动 */
	width:280px;
	background-color:#AAAAAA;
}
.mainBox, .sideBox {
	padding:0 5px;
	color:#FF0000;
	margin-bottom:-9999px;
	padding-bottom:9999px;
}

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

        这种方法存在一个很大的缺陷，那就是如果要实现每列四周有边框效果，那么每列的底部（或顶部）将无法有边框效果。

方法四：给容器div使用单独的背景色（固定布局）

<div class="container">
    <div class="rightWrap">
        <div class="contentWrap">
            <div class="leftWrap">
                <div id="left"></div>
                <div id="content"></div>
                <div id="right"></div>
            </div>
        </div>
    </div>
</div>

.container {
	width: 960px;
	margin: 0 auto;
}
.rightWrap {
	width: 100%;
	float: left;
	background: green;
	overflow: hidden;
	position: relative;
}

.contentWrap {
	float: left;
	background: orange;
	width: 100%;
	position: relative;
	right: 320px;/*此值等于rightSidebar的宽度*/
}

.leftWrap{
	width: 100%;
	background: lime;
	float:left;
	position: relative;
	right: 420px;/*此值等于Content的宽度*/
}
#left {
	float: left;
	width: 220px;
	overflow: hidden;
	position: relative;
	left: 740px;
}
#content {
	float: left;
	width: 420px;
	overflow: hidden;
	position:relative;
	left: 740px;
}
#right {
	float: left;
	overflow: hidden;
	width: 320px;
	background: #333;
	position: relative;
	left: 740px;
}

优点：
        这种方法是不需要借助其他东西（javascript,背景图等）,而是纯CSS和HTML实现的等高列布局，并且能兼容所有浏览器（包括IE6），并且可以很容易创建任意列数。
缺点：
        这种方法不像其他方法一样简单明了，给你理解会带来一定难度，但是只要你理解清楚了，将能帮你创建任意列数的等高布局效果。