html+css布局之--圣杯布局

圣杯布局，就是两边定宽，中间自适应的三栏布局！今天把这个布局代码，码一下！看代码不作过多解释！代码很简单！

 <div id="parents">
    <div id="top">这是header!</div>
    <div id="main">
        <div id="left">这是Left</div>
        <div id="content">这是Content!</div>
        <div id="right">这是Right!</div>
    </div>
    <div id="foot">这是Footer!</div>
</div>
<style>
 * {
        margin: 0;
        padding: 0;
    }
    
    #parents {
        width: 100%;
        margin: 0 auto;
        background: #ccc;
    }
    
    #left,
    #content,
    #right {
        padding-bottom: 2000px;  //2000像素的补偿
        margin-bottom: -2000px;
    }
    
    #main {
        padding-left: 100px;
        padding-right: 150px;
        overflow: hidden;
    }
    
    #top {
        background: #666;
    }
    
    #left {
        background: #E79F6D;
        float: left;
        width: 100px;
        position: relative;
        left: -100px;
    }
    
    #content {
        background: #D6D6D6;
        float: left;
        width: 100%;
        margin-left: -100px;
    }
    
    #right {
        background: #77BBDD;
        float: left;
        width: 150px;
        margin-left: -150px;
        position: relative;
        left: 150px;
    }
    
    #foot {
        background: #666;
        clear: both;
    }
</style>

提示：自己动手试一下，效果会更好！