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

Question

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

我会让图片来说明大部分内容。两列，固定宽度并在浏览器中居中(首先)。我对如何使主栏在屏幕尺寸允许的情况下流畅地展开感到困惑。我可以给主列一个最小宽度作为基线，但它如何流畅地扩展以填充浏览器视口(viewport)的剩余右侧部分？布局应始终保持居中。

我是那种喜欢尝试直到找到答案的人，但我什至不确定从哪里开始。负边距、最大宽度 % 值、最小宽度 px 值和溢出:隐藏是一个开始的地方吗？

我想我想问的是，过去有没有人实现过这种布局？有没有一种方法可以实现它看起来不太“粘”在一起？希望我遗漏了一些明显的东西!

非常感谢任何帮助、提示或相关链接!谢谢!

Answer 1

我认为这基本上就是您要找的东西(按比例缩小以适合 fiddle 窗口)。叠加层只是为了显示 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;
}