这个图别看简简单单几个色块，真正实现也不见得有多容易，得看你考虑到哪些东西。大概例子已经做出来了，提供下载 。

由于上下head跟foot两个色彩是单色的，所以要考虑自适应各种分辨率的屏幕，自适应分辨率不是百分百就够的，div的百分百布局会有很多问题。另一个是中间内容需要宽度自适应，左边side1是固定宽度，右边的side2也是固定宽度。

还有一个应该是比较难的一个问题，就是高度自适应，要保证side1红色块内容增多的时候，右边main，side2的色块也要跟着一起延伸，右边side2的内容增多，左边红色块也要跟着一起延伸，中间main的内容增加，红色块依然要继续延伸。先前也发过 关于 高度百分百引发的思考 ，有兴趣的可以去拍砖。

这个即使是堪称是圣杯布局 都没有去做到这个等高自适应，都是靠内容自适应的。

也许红色块的背景可以使用图片来垂直平铺下来，如果用table来布局那是再好不过了，不要排斥table，它在很多时候可以更方便的帮你布局。就连google得很多产品都在使用 table做主布局，你还想怎样？

如果采用position跟固定高度，就可以很快的定位，但是如果内容超出，会浮于foot层上面。

有兴趣的可以把上面的图做一下，你就会明白原来不是那么容易的。

这里有几种比较巧妙的方法 点击这里查看

有一个很巧妙的用了 border-right 来代替side1 红色块的延伸 比较巧妙的设计。

下面我罗列了一些在布局中，你可能会遇到的问题，或者一些技巧跟习惯分享一下。

1.用padding-bottom:100000px;margin-bottom:-100000px以后会导致opera overflow:hidden 变高

2.float:left 以后可以通过 margin-left:-100% 定位在左边，但是在ie8下会导致下面的foot不能延伸。

3.float 会导致背景色去掉，解决的办法是让父容器也float。

4.如果是一个 ul li 还包含着一个ul li ，float跟position 会导致第二级 ul li 背景图没法显示，主要是因为用了继承父容器的宽度。重新定义一个宽度可以解决ie6问题。也许你不会遇到也说不定。

5.tfoot 要正确嵌套使用，在tbody之上。

<table>
  <thead>
    <tr>
      <td></td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

6.

color:#ffffff\0; 

不止是ie8的hack ，firefox 3.0.1 也支持。

屏蔽ie8的hack是
ie6 ie7 firefox 支持

.class {/*/*/color:#ffffff;/* */}

7.z-index 负数会导致 ie下 链接没法点击

8.color:#fff;不是所有浏览器都支持这种写法，当然在主流浏览器可以，但是这样写并没有什么好处。

第一张图的 三列等高宽度自适应例子，无论哪一列内容多的时候，左边，右边，跟中间的背景色也都会垂直平铺下来，用来学习下还是不错的。我已经通过我的想法结合圣杯的做法做出来了，可以点击这里下载