Html 左一列，中一列

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

这是我当前的CSS代码：

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

---

你可以很容易地做到这一点，而无需

calc

或其他讨厌的过于现代的黑客攻击。以下内容甚至可以在IE7中正常工作，但不确定IE6是否尊重嵌套元素中的

margin:0 auto

，但甚至可以正常工作：

HTML

---

.

您希望在哪些浏览器中使用此功能？它必须在IE7中工作吗？不，根本不需要IE。只是现代浏览器虽然这条评论让我发笑，但IE10在很多方面都比Firefox更现代。好吧，除此之外！关于这一点，什么是“不完全”一致的？它的位置在中心，而且永远都是。调整小提琴上的结果窗格的大小，以便自己查看。如果您对左栏的

边距：120px

-感到困惑，它对应于左栏的宽度，完全是为了完美居中。对不起，我这样做了，但忘了删除我的注释！

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

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;
}