html - 具有两列居中固定宽度容器的 CSS 布局；一列固定宽度，第二列延伸到页尾

Question

截图如下:

我唯一的挑战是是否有可能将左侧的列从容器中溢出。这可能吗？容器不会有背景，它只是为了视觉目的。

#container { width: 960px; margin: 0 auto }
#left-column { ??? }
#right-column { width: 200px; float: right }

有关我要实现的目标的更多详细信息，这是另一个屏幕截图:

960 容器的侧面标有蓝绿色标尺。航类的顶部和底部有一个边框，一直向左延伸并扩展到 960 容器之外。

Answer 1

像这样的事情会做到这一点:

<div id="container">
    <div id="right-column"></div>
    <div id="left-column"></div>    
</div>

CSS:

#container { width: 100%; margin: 0 auto; display:inline-table }
#left-column { height:500px; background:#00ff00;width:auto}
#right-column { width: 150px; float: right;height:500px; background:#00ffff }

在这里检查:

http://jsfiddle.net/h9XuQ/