CSS_Layout三分栏__左右两栏宽度固定,中间自适应

CSS：

 body{
           min-width:800px;
       }
       h1,
       h2,
       div p{
           margin:0;
           padding:10px;
       }
       /*#wrapper{*/
           /*width:90%;*/
           /*margin:0 auto;*/
           /*background:#ddd;*/
       /*}*/
       #content{
           background:#ff6;
       }
       #left,
       #right{
           width:200px;
           float:left;
           background:#fc0;
       }
       #middle{
           float:left;
           width:100%;
           margin:0 -200px;
       }
       #middle .inner{
           margin:0 200px;
           background:#ccc;
       }
       #right{
           float:right;
       }
       #footer{
           clear:both;
       }
       /* Clearfix */
       .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
       .clearfix{display:inline-table;}
       /* Hides from IE-mac /*/
       * html .clearfix{height:1%;}
       .clearfix{display:block;}
       /* End hide from IE-mac */
       *+html .clearfix{min-height:1%;}/* IE7 */

html:

<div id="wrapper">
    <div id="content" class="clearfix">
        <div id="left">
            <h2>Left</h2>
            <p>左边栏宽度固定为200px</p>
        </div>
        <div id="middle">
            <div class="inner">
                <h2>Middle</h2>
                <p>中间栏宽度可以自适应</p>
                <p><b>原理：</b>利用margin的负值错别固定的宽度</p>
            </div>
        </div>
        <div id="right">
            <h2>Right</h2>
            <p>右边栏宽度固定为200px</p>
        </div>
    </div>
    <div id="footer">
        <h1>Footer</h1>
    </div>
</div>

效果如图：

• 三栏float left left right
• 中间栏宽度100%，设置左margin为-200
• 中间栏内部margin:0 200
• 并且去浮动。