Один столбец перемещается влево, а другой заполняет остальную страницу

Question

Основная идея состоит в том, чтобы один div, плавающий влево, со статической шириной, а другой плавал вправо, заполняя его шириной всю оставшуюся страницу. Как я могу добиться этого?

До сих пор я использовал в CSS что-то вроде этого:

width: calc(100% - 325px); 

, но я ищу лучшее решение кросс-браузера.

Answer 1

Просто сделать слева поплавка: левый, а остальные к перелива: скрытый так:

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

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

Вы также можете сделать их даже используя дисплей: таблица ..... но вы задаете вопрос это было выше.

Answer 2

простой трюк с использованием маржи

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

.container{ 
    margin-left: 325px; 
} 

быстрый пример

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

Answer 3

Если вы всегда знаете ширину левой колонки, то, как это было бы лучше всего:

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

Answer 4

В основном это было бы (с пробелом 1em в твин):

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