Html CSS布局，中心固定宽度容器，两列；一列固定宽度，第二列延伸至页面末尾

以下是一个屏幕截图：

我唯一的挑战是，是否有可能将左侧立柱从容器中溢出。这可能吗？容器将没有bg，它仅用于视觉目的

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

有关我试图实现的目标的更多详细信息，请参见另一个屏幕截图：

---

960集装箱的侧面用青绿色标尺标记。航班在顶部和底部都有一个边界，一直延伸到左侧，并扩展到960集装箱的外部。

类似的操作可以做到：

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

请在此处查看：

---

如果坚持将左div放在容器中，没有javascript的帮助是不可能的

如果您只想占用页面的剩余部分，而不介意将其放置在何处，则可以尝试以下操作：

#theLeftColumn {
    position：fixed; /*or absolute if it is a direct child of body*/
    margin-top:0px; /*set to other value if you need to leave space for header menu */
    left: 0px;
    /*280px = (width of container)/2 - (width of right fixed width column)
            = 960px/2-200px */
    width: -moz-calc(50% + 280px);
    width: -webkit-calc(50% + 280px);
    width: calc(50% + 280px);
    /*if it is div, the default of display is block, else it is needed to be set */
    display:block;
}

---

请注意，calc函数需要CSS3。

您需要的可能是一个包装器元素。 内容显然放在包装器元素中，其大小必须大于960px。 我想这都是关于下面的代码

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

这就是你想问的吗？

---

不确定您是想知道来源还是样式问题。

为什么要将列从其容器中取出？为什么不把它放在HTML的容器外呢？你能告诉我们你想达到什么目标吗？：）我用另一个截图更新了这个问题。你可以删除额外的样式容器不能是100%；删除display:inline table属性，并为其指定所需的宽度。不过，左列并没有完全向左扩展。执行此操作时#container{width:960px；margin:0 auto；}左侧边栏将保持在960范围内，它需要一直延伸到窗口的左侧，而不是容器。容器外的东西并不重要。你可以假装容器外面只是一个。是的，如果你坚持把它放在容器里面。

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