5分钟快实现圣杯布局

啥都不说先上效果图

代码如下
html

 <div id="top">顶部</div>
    <div id="cen">
        <div id="ccc" class="bl">内容</div>
        <div id="left" class="bl">左边</div>
        <div id="right" class="bl">右边</div>
    </div>
   
    <div id="foot">底部</div>   

css

 *{
        padding: 0;
        margin: 0;
    }
    #body{
        max-width: 600px;
    }
    #top{
        background-color: blue;
        width: 100%;
        text-align: center;
    }
    #cen{
        padding-left: 200px;
        padding-right: 200px;
    }
    #ccc{
        background-color: brown;
        width: 100%;
        text-align: center;
        line-height: 42.5rem;
        height: 42.5rem;
    }
    #left{
        position: relative; 
        background-color: blueviolet;
        width: 200px;
        margin-left:-100%;
        right: 200px;
        height: 42.5rem;
        text-align: center;
        line-height: 42.5rem;
    }
    #right{
        position: relative;
        background-color: cadetblue;
        width: 200px;
        margin-right:-200px; 
        text-align: center;
        height: 42.5rem;
        line-height: 42.5rem;
    }
    #foot{
        text-align: center;
        background-color: coral;
        width: 100%;
        clear: both;
        /* clear: both;  清除浮动 */
    }
    .bl{
        float: left;
    }