三列自适应布局的实现方式(兼容IE6+)

1.绝对定位方式

 <div class="nm-3-lr">
     <div class="aside-f">
         <p>侧边栏1固定宽度</p>
     </div>
     <div class="main">
         <p>绝对定位-主内容栏自适应宽度</p>
     </div>
     <div class="aside-s">
         <p>侧边栏2固定宽度</p>
     </div>
 </div>

 <div class="nm-3-lc">
     <div class="aside-f">
         <p>侧边栏1固定宽度</p>
     </div>
     <div class="main">
         <p>绝对定位-主内容栏自适应宽度</p>
     </div>
     <div class="aside-s">
         <p>侧边栏2固定宽度</p>
     </div>
 </div>

 <div class="nm-3-cr">
     <div class="aside-f">
         <p>侧边栏1固定宽度</p>
     </div>
     <div class="main">
         <p>绝对定位-主内容栏自适应宽度</p>
     </div>
     <div class="aside-s">
         <p>侧边栏2固定宽度</p>
     </div>
 </div>

 /* 普通布局 */
 .nm-3-lr,
 .nm-3-lc,
 .nm-3-cr
 {
     min-width: 400px;
     margin: 10px 0;
     position: relative;
     *zoom:;
 }
     /* 左中右 中间自适应 */
         .nm-3-lr .aside-f{
             position: absolute;
             top:;
             left:;
             width: 200px;
         }
         .nm-3-lr .main{
             margin: 0 210px;
         }
         .nm-3-lr .aside-s{
             position: absolute;
             top:;
             right:;
             width: 200px;
         }

     /* 左中右 右侧自适应 */
         .nm-3-lc .aside-f{
             position: absolute;
             top:;
             left:;
             width: 200px;
         }
         .nm-3-lc .main{
             margin-left: 420px;
         }
         .nm-3-lc .aside-s{
             position: absolute;
             top:;
             left: 210px;
             width: 200px;
         }

         /* 左中右 左侧自适应 */
         .nm-3-cr .aside-f{
             position: absolute;
             top:;
             right: 210px;
             width: 200px;
         }
         .nm-3-cr .main{
             margin-right: 420px;
         }
         .nm-3-cr .aside-s{
             position: absolute;
             top:;
             right:;
             width: 200px;
         }

2.采用圣杯布局

 <div class="bd-3-lr">
     <div class="main">
         <p>圣杯布局-主内容栏自适应宽度</p>
     </div>
     <div class="aside-f">
         <p>侧边栏1固定宽度</p>
     </div>
     <div class="aside-s">
         <p>侧边栏2固定宽度</p>
     </div>
 </div>

 <div class="bd-3-lc">
     <div class="main">
         <p>圣杯布局-主内容栏自适应宽度</p>
     </div>
     <div class="aside-f">
         <p>侧边栏1固定宽度</p>
     </div>
     <div class="aside-s">
         <p>侧边栏2固定宽度</p>
     </div>
 </div>

 <div class="bd-3-cr">
     <div class="main">
         <p>圣杯布局-主内容栏自适应宽度</p>
     </div>
     <div class="aside-f">
         <p>侧边栏1固定宽度</p>
     </div>
     <div class="aside-s">
         <p>侧边栏2固定宽度</p>
     </div>
 </div>

 /* 圣杯布局 */
 .bd-3-lr,
 .bd-3-lc,
 .bd-3-cr
 {
     min-width: 400px;
     margin: 10px 0;
 }
      /* 左中右 中间自适应 */
         .bd-3-lr {
             zoom:;
             overflow:hidden;
             padding-left:210px;
             padding-right:210px;
         }
         .bd-3-lr .main {
             float:left;
             width:100%;
         }
         .bd-3-lr .aside-f {
             float: left;
             width:200px;
             margin-left: -100%;

             position:relative;
             left: -210px;
             _left: 210px; /*IE6 hack*/
         }
         .bd-3-lr .aside-s {
             float: left;
             width:200px;
             margin-left: -200px;

             position:relative;
             right: -210px;
         }

     /* 左中右，右侧自适应 */
         .bd-3-lc {
             zoom:;
             overflow:hidden;
             padding-left:420px;
         }
         .bd-3-lc .main {
             float:left;
             width:100%;
         }
         .bd-3-lc .aside-f {
             float: left;
             width:200px;
             margin-left: -100%;
             position:relative;
             left: -420px;
             _left: 0px; /*IE6 hack*/
         }
         .bd-3-lc .aside-s {
             float: left;
             width:200px;
             margin-left: -100%;
             position:relative;
             left: -210px;
             _left: 210px; /*IE6 hack*/
         }

     /* 左中右，左侧自适应 */
         .bd-3-cr{
             overflow: hidden;
             padding-right: 420px;
         }
         .bd-3-cr .main {
             width: 100%;
             float: left;
         }
         .bd-3-cr .aside-f {
             width: 200px;
             float: left;
             margin-left: -200px;
             position: relative;
             left: 210px;
         }
         .bd-3-cr .aside-s {
             width: 200px;
             float: left;
             margin-left: -200px;
             position: relative;
             left: 420px;
         }

3.采用双飞翼布局

 <div class="df-3-lr">
     <div class="df-main">
         <div class="main-warp">
             <p>双飞翼布局-主内容栏自适应宽度</p>
         </div>
     </div>
     <div class="aside-f">
         <p>侧边栏1固定宽度</p>
     </div>
     <div class="aside-s">
         <p>侧边栏2固定宽度</p>
     </div>
 </div>

 <div class="df-3-lc">
     <div class="df-main">
         <div class="main-warp">
             <p>双飞翼布局-主内容栏自适应宽度</p>
         </div>
     </div>
     <div class="aside-f">
         <p>侧边栏1固定宽度</p>
     </div>
     <div class="aside-s">
         <p>侧边栏2固定宽度</p>
     </div>
 </div>

 <div class="df-3-cr">
     <div class="df-main">
         <div class="main-warp">
             <p>双飞翼布局-主内容栏自适应宽度</p>
         </div>
     </div>
     <div class="aside-f">
         <p>侧边栏1固定宽度</p>
     </div>
     <div class="aside-s">
         <p>侧边栏2固定宽度</p>
     </div>
 </div>

 /* 双飞翼布局 */
 .df-3-lr,
 .df-3-lc,
 .df-3-cr
 {
     margin: 10px 0;
 }
     /* 右侧栏固定宽度，左侧自适应 */
         .df-rgt{
             zoom:;
             overflow: hidden;
         }
         .df-rgt .df-main{
             float: left;
             width: 100%;
         }
         .df-rgt .df-main .main-warp{
             margin-right: 210px;
         }
         .df-rgt .aside{
             width: 200px;
             margin-left: -200px;
             float: left;
         }

     /* 左中右 中间自适应 */
         .df-3-lr{
             zoom:;
             overflow: hidden;
         }
         .df-3-lr .df-main{
             float: left;
             width: 100%;
         }
         .df-3-lr .df-main .main-warp{

             margin: 0 210px;
         }
         .df-3-lr .aside-f, .df-3-lr .aside-s{
             width: 200px;
             float: left;
         }
         .df-3-lr .aside-f{

             margin-left: -100%;
         }
         .df-3-lr .aside-s{

             margin-left: -200px;
         }

     /* 左中右 右侧自适应 */
         .df-3-lc{
             zoom:;
             overflow: hidden;
         }
         .df-3-lc .df-main{
             width: 100%;
             float: left;
         }
         .df-3-lc .df-main .main-warp{

             margin-left: 420px;
         }
         .df-3-lc .aside-f, .df-3-lc .aside-s{
             width: 200px;
             float: left;
         }
         .df-3-lc .aside-f{
             margin-left: -100%;
         }
         .df-3-lc .aside-s{
             margin-left: -100%;
             position: relative;
             left: 210px;
         }

     /* 左中右 左侧自适应 */
         .df-3-cr{
             zoom:;
             overflow: hidden;
         }
         .df-3-cr .df-main{
             width: 100%;
             float: left;
         }
         .df-3-cr .df-main .main-warp{
             margin-right: 420px;
         }
         .df-3-cr .aside-f, .df-3-cr .aside-s{
             width: 200px;
             float: left;
         }
         .df-3-cr .aside-f{
             margin-left: -200px;
             position: relative;
             right: 210px;
         }
         .df-3-cr .aside-s{
             margin-left: -200px;
         }

整体效果：http://runjs.cn/detail/lvf5bmzq