什么是通过流体中心实现3列布局的正确方法

Question

我正在制作一个3列布局,带有两个固定宽度的侧边栏(左侧和右侧)和一个流体中心.我已经关注了A List Apart的Holy Grail文章,虽然这在大多数浏览器中运行良好,但我在Internet Explorer 7+中遇到了一些问题.

IE 7+的问题实际上不是源于这种技术,而是源于页面以怪异模式呈现的事实.但是,如果我以符合标准的方式进行渲染,许多过时的元素就会被取代,需要完全重写.

鉴于这篇文章可以追溯到几年,这是关于这个主题的最新参考吗？或者我应该采用不同的技术？

任何有关最佳方法的见解将不胜感激.

Answer 1

浮动列真的没有意义.

HTML:

<div id="wrapper">
    <div id="left"></div>
    <div id="center"> Center content</div>
    <div id="right"></div>
</div>

CSS:

#left {
    position:absolute;
    left:0;
    width:50px;
    height:100%;
    background-color:pink;
}

#center {
    height:100%;
    margin: 0 50px;
    background-color:green;
}

#right {
    position:absolute;
    right:0;
    top:0;
    width:50px;
    height:100%;
    background-color:red;
}

body, html, #wrapper {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}

演示:http://jsfiddle.net/AlienWebguy/ykAPM/