如何实现两列居中布局，主列可在更宽的屏幕上展开？

Question

我知道CSS几乎可以做任何事情，但我对如何实现这种布局模型感到有点困惑。

我会让图像完成大部分的谈话。两列，固定宽度和浏览器中心（开头）。我很难过如何使主柱在屏幕尺寸允许的情况下流畅地扩展。我可以给主列一个最小宽度作为基线，但它如何流畅地扩展以填充浏览器视口的剩余右手部分？总而言之，布局应该保持居中。

我是那种喜欢尝试的人，直到我想出办法，但我不确定从哪里开始。负边距，最大宽度％值，最小宽度px值和溢出：隐藏是一个开始的地方吗？

我想我要问的是，过去有没有人实现这种布局？有没有办法实现它似乎没有太“管道录音”在一起？希望我错过了一些明显的东西！

非常感谢任何帮助，提示或相关链接！ 谢谢！

Answer 1

不要在主列上使用静态宽度（例如px或pt），将左列设置为所需宽度并浮动两者。

现在将容器设为流体宽度容器：

 #wrapper {
      width: 90em;
      max-width: 90%;
 }

Answer 2

我认为这基本上就是你要找的东西（按比例缩小以适应小提琴窗口）。覆盖图就是显示50％标记的位置。

http://jsfiddle.net/m6Dk6/1

<div id="outer">
    <div id="inner">
        <div id="sidebar">
            SIDEBAR
        </div>                    

        CONTENT 
    </div>
</div>

---

#outer{
    float:right;
    width: 50%;
}

#inner{
    margin-left: -480px;    
    min-width: 960px;
}

#sidebar{
    width: 200px;  /* your width here */
    float: left;
}