1、首选看一下html代码：
html代码：
<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
这种方法是借助于负的margin来实现的，首先在中间列定好固定值，因为此值是不会在改变的，接着对其进行左浮动；那么关键地主是在左右边栏设置地方，这种方法是将其都进行50%的宽度设置，并加上中负的左边距，此负的左边距最理想的值是中间栏宽度的一半加上1px，这样一来，左右边栏内容无法正常显示，那是因为对他们进行了负的左边距操作，现在只需要在左右边栏的内层div.inner将其拉回来。
2、css样式写法如下：
#left,
#right {
float: left
margin: 0 0 0 -271px
width: 50%
}
#main {
width: 540px
float: left
background: green
}
.inner {
padding: 20px
}
#left .inner,
#right .inner {
margin: 0 0 0 271px
background: orange
}
3、具体效果如下：
为了看到清楚预览效果，我都加了边框，你到时候去掉就行了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.footer{position:absolutebottom:0pxheight:46px}
.footer-left,.footer-right,.footer-center{height:46pxborder:1px #ccc solid}
.footer-left{width:32pxfloat:leftbackground:url(../images/footer_left.jpg) no-repeatmargin:0px 0 0 0overflow:hidden}
.footer-center{width:autooverflow:autofloat:leftbackground:url(../images/footer_bg.jpg) repeat-xmargin:0padding:0 0px 0 0px}
.footer-right{width:22pxfloat:rightbackground:url(../images/footer_right.jpg) no-repeatmargin:0px 0 0 0overflow:hidden}
-->
</style>
</head>
<body>
<div class="footer">
<div class="footer-left"></div>
<div class="footer-center">
gjhgjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjffffffffffffffffffffffffffffffffffffffffffffjjjjjjffffffffffffffffffffffffffffffffffffffffffffjjjjj
</div>
<div class="footer-right"></div>
</div>
</body>
</html>
三栏布局一般指的是页面中一共有三栏， 左右两栏宽度固定，中间自适应的布局 ，三栏布局的具体实现：
利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。
