css - 一列向左浮动，另一列填充页面的其余部分

Question

基本思想是让一个 div 以静态宽度向左浮动，另一个向右浮动，以填充页面其余部分的宽度。我怎样才能做到这一点？

到目前为止，我在 css 中使用过这样的东西：

width: calc( 100% - 325px );

但我正在寻找最好的跨浏览器解决方案。

Answer 1

只需让 left浮动：left其余溢出：隐藏如下：

.left {float: left; width: 200px;}
.full {overflow: hidden; width: auto;}

http://jsfiddle.net/Riskbreaker/DdaPs/

您甚至可以使用display: table来制作它们.....但是您的问题是上面的那个。

Answer 2

基本上它会是（之间有 1em 的差距）：

.col1 {float:left;
width:325px;
margin :0 1em;
}
.col2 {overflow:hidden;
margin-right:1em;
}

Answer 3

使用边距的简单技巧

.sidebar{
   position: absolute;
   left: 0;
   top: 0;
   width: 325px;
}

.container{
   margin-left: 325px;
}

一个简单的例子

http://jsfiddle.net/s8nFX/1/

Answer 4

如果您总是知道左列的宽度，最好这样：

 #left_column
    {
        width: 325px;
        float: left;
    }
    #right_column
    {
        position: absolute;
        left: 325px; right:0;
    }