重新认识布局

两列布局：

1.左边定宽，右边自适应。

方法一：采用position：absollute;并设置margin-left的值。

例：

#left{
    position:absolute;
    width:300px;
    top:0px;
    left:0px;
    background:#F00;
}
#right{
    background:#0FC;
    margin-left:300px;
}
<div id="left">左边定宽</div> <div id="right">右边自适应</div>

方法二：采用float;并设置overflow:auto;(隐藏溢出的内容，触发bfc)

例：

#left {
    float: left;
    width: 300px;
    background-color: blue;
}
#right {
    overflow: auto;
    background-color: red;
}

<div id="left">左边自适应</div>
<div id="right">右边定宽</div>

方法三，采用float+margin

    .wrapper .left{float: left;width: 200px;background: dodgerblue}
    .wrapper .right{margin-left: 200px;background: darkseagreen}
    <div class="wrapper">
        <div class="left">左边定宽</div>
        <div class="right">右边自适应</div>
    </div>

方法四，采用float+margin（fix）

    .wrapper .left3{float: left; width: 200px;background: dodgerblue}
    .wrapper .right3{
        overflow: hidden;
        background: darkseagreen;
    }
<div class="wrapper">
            <div class="left2">左边定宽</div>
            <div class="right2">
                <div class="right-fix">右边自适应</div> 
            </div>
    </div>

方法五，采用负margin值

.mainBox {
        float: left;
        width: 100%;
        background-color: #FFFFFF;
    }
    /* 设置主要内容区域的外层div标签浮动，并将宽度设置为100% */

    .mainBox .content {
        margin: 0 210px 0 0;
        background-color: #000000;
    }
    /* 设置主要内容区域的内层div标签外补丁保持宽度的默认值为auto，留出空白的位置 */

    .sideBox {
        float: left;
        width: 200px;
        margin-left: -200px;
        background-color: #666666;
    }
    /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */
<div class="container">
        <div class="mainBox">
            <div class="content">主要内容区域</div>
        </div>
        <div class="sideBox">侧边栏</div>
    </div>

采用table

三列布局(两边定宽，中间自适应)

方法一：与两列布局类似，左右两边设置position：absolute；和top:0;left:0;right:0;

中间设置margin-left和margin-right即可.

*{
    padding:0px;
    margin:0px;
}
#left,#right{
    position:absolute;
    width: 300px;
    top:0;
    background-color: #0FC;
}
#left{
    left:0;
}
#right{
    right:0;
}
#main{
    margin:0 300px;
    background-color:#999;
}

<div id="left">左边定宽</div>
<div id="main">中间自适应</div>
<div id="right">右边定宽</div>

方法二：左右采用float,中间设置margin:0 300px;

*{
    padding:0px;
    margin:0px;
}
#left,#right{
    float:left;
    width: 300px;
    background-color: #0FC;
}
#right{
    float:right;
}
#main{
    margin:0 300px;
    background-color:#999;
}

<div id="left">左边定宽</div>
<div id="right">右边定宽</div>
<div id="main">中间自适应</div>

方法三，负边距

    .container {
        text-align: center;
        color: #FFFFFF;
    }

    .mainBox {
        float: left;
        width: 100%;
        background-color: #FFFFFF;
    }
    /* 设置主要内容区域的外层div标签浮动，并将宽度设置为100% */

    .mainBox .content {
        margin: 0 210px 0 310px; //  将 210px 和 310px 分别修改为 百分数，可以得到左侧定宽右侧及中间自适应、三列宽度自适应布局  
        background-color: #000000;
    }
    /* 设置主要内容区域的内层div标签外补丁保持宽度的默认值为auto，留出空白的位置给左右两列 */

    .subMainBox {
        float: left;
        width: 300px;
        margin-left: -100%;
        background-color: #666666;
    }
    /* 将次要内容区域设置左浮动，并设置宽度为300px，负边距为左边的-100% */

    .sideBox {
        float: left;
        width: 200px;
        margin-left: -200px;
        background-color: #666666;
    }
    /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */
<div class="container">  
    <div class="mainBox">  
        <div class="content">主要内容区域</div>  
    </div>  
    <div class="subMainBox">次要内容区域</div>  
    <div class="sideBox">侧边栏</div>  
</div>