圣杯布局

三栏布局（两栏布局）：侧栏宽度固定，中间的主内容区域宽度自适应
主要原理，对浮动元素设置负margin = 自身宽度，会使元素上移。
html代码

    <div id="content">
        <div class="main">main</div>
        <div class="aside">aside</div>
        <div class="extra">extra</div>
    </div>

CSS代码

    .aside{
        width: 50px;
        height: 60px;
        background-color: red;
    }
    .extra{
        width: 50px;
        height: 60px;
        background-color: green;
    }
    .main{
        width: 100%;
        background-color: #ccc;
        height: 100px;
    }

设置三个元素浮动，并设置相应元素的负margin后，元素会上移。当然浮动后需要清除浮动，这里不做介绍，详情见BFC博客。
CSS代码

    .aside{
        width: 50px;
        height: 60px;
        background-color: red;
        float: left;
        margin-left: -100%;/*父容器的宽度*/
    }
    .extra{
        width: 50px;
        height: 60px;
        background-color: green;
        float: left;
        margin-left: -50px;/*容器自身的宽度*/
    }
    .main{
        width: 100%;/*必须设置，浮动后元素宽度会塌陷*/
        background-color: #ccc;
        height: 100px;
        float: left;
    }

当然，此时仍有一些问题，比如.main被遮盖住了一部分。
以下开始是圣杯布局与双飞翼布局的不同点：

1.对容器设置padding

    #content{
            padding: 0 60px;
        }

2.对侧栏设置position: relative;并调整位置

    #content{
        padding: 0 60px;
        border: 1px solid black;
    }
    .aside{
        width: 50px;
        height: 60px;
        background-color: red;
        float: left;
        margin-left: -100%;/*父容器的宽度*/
        position: relative;
        left: -60px;
    }
    .extra{
        width: 50px;
        height: 60px;
        background-color: green;
        float: left;
        margin-left: -50px;/*容器自身的宽度*/
        position: relative;
        left: 60px;
    }
    .main{
        width: 100%;
        background-color: #ccc;
        height: 100px;
        float: left;
    }

推荐阅读更多精彩内容