最近在内部讨论关于”完美三栏”的话题,看到一篇”In Search of the Holy Grail“,相当的好.故此翻译之.

In Search of the Holy Grail

很抱歉我没有将这篇文章命名.我不是想夸大他的重要性或是轻视其他的Holy Grails.但是确实是这么称呼，我们都明白它的含义.

三栏，一个是固定宽度的导航栏,另一个是GOOGLE广告，或是Filckr图片展示，就像Fancy的松露巧克力一样，和一个重要的柔滑的夹心。在这个博客流行的黄金年代它是相当适用的，加之相当大的实现难度，理所应当的获取了”圣杯”的名称.

有很多文章是讨论关于”圣杯”的，也有很多很好的模板可以使用。但是，所有的方案都是以牺牲以下特性为代价的：合理的内容顺序，宽度自适应，合理的标签。这三者往往是这难以达到合理的布局中要折中的元素

在最近的一个项目中我终于找到了传说中的圣杯。我在不会改变您的代码和灵活性的前提下尽可能的描述他。他会是：

• 一个自适应适应的中心和固定宽度的侧边栏

• 允许中间的内容先于其他出现在代码中

• 允许任何一栏都是最高的高度

• 只需要额外的一个DIV标签

• 非常的简单的CSS代码和很少很少的HACK 补丁

站在巨人的肩膀上

这个技术的灵感来自于Alex Robinson’s的One True Layout。他曾经在他的文章里阐述过”圣杯”的若干问题，但是他的解决方法需要两个包装并且要求每一栏都需要一个父级DIV，否则很难写内在结构.

另一方面则是由Eric Meyer’s的写法想到的，他利用了多种类型的单元混合定位。它的例子中也是用了固定的侧边栏和自适应的中心层，可是不幸的是，他依赖于近似的百分比，不是固定的值，而且填充了一部分随屏幕分辨率不同而自适应宽度的层。

言归正传，看看代码

代码是很直观而且很优雅的。

(为了直观起见，我们使用了非语义化的”中心”、”左”和”右”来阐述我们的代码，但是我们建议您在您的代码中使用语义化的标签 -Ed.)

<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>

一个额外的DIV包含着我们的三个层,这样的结构符合我集中内容上一体的标记为一体的习惯(obsessive compulsive markup habits. 翻译的不准确)

样式很也简单,左边侧栏是200PX,右边是150,为了简便标示用LC,RC,CC分别代表左边,右边和中间,样式如下:

body { 
  min-width: 550px;      /* 2x LC width + RC width */ 
} 
#container { 
  padding-left: 200px;   /* LC width */ 
  padding-right: 150px;  /* RC width */ 
} 
#container .column { 
  position: relative; 
  float: left; 
} 
#center { 
  width: 100％; 
} 
#left { 
  width: 200px;          /* LC width */ 
  right: 200px;          /* LC width */ 
  margin-left: -100％; 
} 
#right { 
  width: 150px;          /* RC width */ 
  margin-right: -150px;  /* RC width */ 
} 
#footer { 
  clear: both; 
} 
/*** IE6 Fix ***/ 
* html #left { 
  left: 150px;           /* RC width */ 
}

重新度量你想要的模型的价值,你会发现其实很简单.这布局能在Opera, Firefox, and IE6(需要在最后一句HACK).IE5.5则需要HACK CSS盒模型。刚好也给读者一个练习的机会(Orz).
再看一遍这段优化代码(例子)