三种方法实现三栏式布局

<div>
    <article class="main">article>
    <aside class="left">aside>
    <aside class="right">aside>
div>

 1 *{margin: 0;padding: 0;}
 2 
 3 div{
 4     background: #eee;
 5     padding: 20px 160px 20px 240px;/*腾出左右的空间用于布局走右侧*/
 6     margin: 20px;
 7     border: 1px solid #999999;
 8     box-sizing: border-box;
 9     overflow: auto;/*清浮动*/
10 }
11 
12 article,aside{
13     background: #FFF;
14     border:1px solid #999999;
15 }

1 .main{
2     width: 100%;/*撑满div的宽度*/
3     height: 300px;
4     float: left;
5     box-sizing: border-box;
6     padding: 20px;
7 }

.left{
    width: 200px;
    height: 100px;
    float: left;
    position: relative;
    margin-left: -100%;/*配合float使用，是元素移动到与main同行的位置*/
    box-sizing: border-box;
    left: -220px;/*调整位置*/
    padding: 20px;
}

.right{
    width: 120px;
    height: 200px;
    float: left;
    position: relative;
    margin-left: -120px;
    box-sizing: border-box;
    right: -140px;
}

@media only screen and (max-width: 650px) {/*解决浏览器窗口极端现象*/
    div{
        width: 610px;
    }
}

<div id="container">
        <div id="wrapper">
            <div id="main">maindiv>
        div>
        <div id="left">leftdiv>
        <div id="right">rightdiv>
    div>

body{
    padding: 20px;
    font-size: 14px;
    font-family: sans-serif;
}
#container{
    overflow: hidden;/*清浮动*/
    /*width: 100%;*//*可加可不加*/
    padding: 20px;
    background-color: #ccc;
    box-sizing: border-box;/*进入怪异盒模型*/
}

#wrapper{
    width: 100%;
    float: left;/*这是必须*/
}
#main{
    height: 300px;
    border: 1px solid #555;
    margin-left: 220px;/*空开左侧栏*/
    margin-right: 140px;/*空开右侧栏*/
    background: #eee;
}

#left{
    width: 200px;
    height: 200px;
    border: 1px solid #555;
    background: #fff;
    float: left;/*这是必须*/
    margin-left: -100%;/*将right移动到与#main同行*/
}

#right{
    width: 120px;
    height: 120px;
    border: 1px solid #555;
    background: #fff;
    float: left;/*这是必须*/
    margin-left: -122px;/*将right移动到与#main同行*/
}

@media only screen and (max-width: 600px) {/*解决浏览器窗口极端现象*/
    #container{
        width: 544px;
    }
}

<div class="section">
            <div id="left_div">div>
            <div id="right_div">div>
            <div id="container">div>
        div>

.section{
    border: 1px #999 solid;
    background-color: #eee;
    padding: 20px;
    margin: 20px;
    zoom: 1;/*IE请浮动*/
    overflow: hidden;/*IE请浮动*/
}
.section::after,section::before{
    content: ‘‘;
    display: block;
    visibility: hidden;
}
.section::after{
    clear: both;
}

#left_div{
    width: 158px;
　　 height:100px;
    padding: 20px;
    border: 1px #999 solid;
    background: #fff;
    float: left;
}

#right_div{
    width: 80px;
    height:100px;
    padding: 20px;
    border: 1px #999 solid;
    float: right;
}

#container{
　　height:200px;
    margin-left: 220px;/*左侧留白*/
    margin-right: 140px;/*右侧留白*/
    border: 1px #999 solid;
}