聖盃佈局是討論「三欄液態佈局」的實現，它最早出自於誰或許不得而查了。

所謂液態佈局是相對固態佈局而言的，固態佈局就是固定值不變的佈局，液態就好比在容器裡到了一杯水，它可以隨著容器寬度的變化而自適應寬度。（說白了，就是三欄佈局，兩邊固定，中間自適應）

<div id="header">#header</div>

<div id="container">
  <div id="center" class="column">#center</div>
  <div id="left" class="column">#left</div>
 

  <div id="right" class="column">#right</div>
</div>

<div id="footer">#footer</div>

第一種方法

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  height
 
: 200px;
  position: relative;
  float: left;
}
#center {
  background-color: #e9e9e9;
  width: 100%;
}
#left {
  background-color: red;
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  background-color: blue;
  width: 150px;          /* RC width */
  margin-right
 
: -150px;  /* RC width */
}
#footer {
  clear: both;
}
#header, 
#footer {
  background-color: #c9c9c9;
}

/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

第二種方法：

<style type="text/css">
         *{
            margin:0px;
            padding:0px;
         }
        #left{
            position: absolute;
            width:200px;
            height: 300px;
            left: 0px;
            top: 0px;
            background: red;
        }
         #center{
            margin-left: 200px;
            margin-right: 200px;
            height: 300px;
            background:#ccc;

        }

         #right{
            position: absolute;
            width:200px;
            height: 300px;
            right: 0px;
            top: 0px;
            background:blue;
        }
    </style>

第三種方法（CSS3）

<style type="text/css">
     #container{
        display: -moz-box;
        display: -webkit-box;
    }
    #left{
        width: 200px;
        padding:20px;
        background-color: red;
    }
     #center{
        -moz-box-flex:1;
        -webkit-box-flex:1;
        padding:20px;
        height: 900px;
        font-size: 30px;
        background-color: yellow;
    }
     #right{
        width: 200px;
        padding:20px;
        background-color:blue;
    }
   /* #left,#center,#right{
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
    }*/    

</style>