剩下一列，一个中心

Question

我一直在尝试制作一个页面，其中包含左侧330px宽度的列，然后是另一列最大宽度为670px的列，该页面以页面的剩余宽度为中心。当然，如果屏幕宽度太小而不适合1000px，则第二列将调整大小。我该怎么做？

这是我目前的CSS代码：

#left {
   float:left;
   width:330px;
}
#right {
   ???
}

Answer 1

如果没有calc或其他令人讨厌的过于现代的黑客攻击，您可以轻松完成此操作。以下应该在IE7中工作正常，不确定IE6及其在嵌套元素中对margin:0 auto的尊重，但甚至可以工作：

HTML

<div id="layout">
    <div id="leftcolumn">
        Test
    </div>
    <div id="remainder">
        <div id="rightcolumn">
            Test
        </div>
    </div>    
</div>

CSS

div {
    color:white;
    height:400px;  
    text-align:center;
}
#leftcolumn {
    background:red;
    float:left;
    width:120px;
}
#remainder {
    margin-left:120px;
}
#rightcolumn {   
    width:100%;
    margin:0 auto;
    max-width:300px;
    background:green;
}

Fiddle supplied