In Search of the Holy Grail（圣杯布局

let’s see some code

//html
<div class = 'wrap'>
  <div class = 'center column'>眼睛眯着</div>
  <div class = 'left column'>阳光暖和</div>
  <div class = 'right column'>我用手拨开了一束阳光</div>
</div>

//css
.wrap{
   padding:0 200px;
}
.column{
  position: relative;
  float:left;
  height:200px;
}
.center{
  width:100%;
  background:#aaa;
}
.left{
  width:200px;
  background:#555;
  right:200px;
  margin-left:-100%;
}
.right{
  width:200px;
  background:#888;
  margin-right:-200px;
}

How it works

The strategy is straightforward. The container div will have a liquid center and fixed-width padding on the side. The trick is then to get the left column to line up with the left padding and the right column with the right padding, leaving the center column to fill the liquid width of the container.

Let’s build this up step by step.

STEP 1: CREATE THE FRAME

Start with the header, footer, and container.

<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>

We pad the container with the width we want our left and right columns to occupy.

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}

Our layout now looks like this:

Step 1: Create the frame

STEP 2: ADD THE COLUMNS

Now that we have our basic frame, we’ll stick in the columns.

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

Next we add the appropriate widths and float them to get them in line. We’ll also need to clear the footer to keep it beneath the floated columns.

#container .column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;  /* LC width */
}
#right {
  width: 150px;  /* RC width */
}
#footer {
  clear: both;
}

Note that the 100% width on the center column refers to the width of the container div, exclusive of the padding. We’ll see this 100% width again as the layout comes together, and it will still refer to this central width of the container.

The columns now want to line up in order, but because the center column is taking up 100% of the available space, the left and right columns wrap.

Step 2: Add the columns

STEP 3: PULL THE LEFT COLUMN INTO PLACE

The only thing left is to get the colums to line up with the padding on the container. The center column starts exactly where it needs to be, so we’ll focus on the left column.

It takes two steps to get the left column in place. First, we’ll pull it all the way across the center column with a 100% negative margin. Remember that the 100% refers to the central width of the container, which is also exactly the width of the center column.

#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
}

Now the left column is overlapping the center column, sharing its left edge. The right column floats left and nestles against right edge of the center column (but still wraps), leaving us with the following:

Step 3: Pull the left column into place—halfway there

To push the left column the rest of the way over, we’ll use relative positioning with an offset that’s exactly the width of the left column.

#container .columns {
  float: left;
  position: relative;
}
#left {
  width: 200px;        /* LC width */
  margin-left: -100%; 
  right: 200px;        /* LC width */
}

The right property pushes it 200px away from the right edge; that is, to the left. Now the left column lines up perfectly with the left padding of the container.

Step 3: Left column pulled into place

STEP 4: PULL THE RIGHT COLUMN INTO PLACE

The only task remaining is to pull the right column into place. To do that, we just need to pull it out of the container and into the container’s padding. We’ll again use a negative margin.

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

Everything is now in its right place, and the wrapping disappears.

Step 4: Pull the right column into place

edit it on codepen
参考文章：In Search of the Holy Grail