Как изменить ширину, чтобы заполнить оставшееся пространство (CSS)

Question

гляньте:

Результат должен быть

Answer 1

#sidebar { float:left; width:280px; } 
#content { margin: 0 0 0 280px; } /* dont float it */ 

http://jsfiddle.net/auTbG/1/

Вы будете есть проблемы, если вы плаваете внутри o f #content, и вы пытаетесь их очистить.

Answer 2

Фактически использование css flex display может решить эту проблему легко.

Установить родительский контейнер, чтобы иметь

display: flex; 
align-items: stretch; 
align-content: stretch; 

Тогда дети будут иметь flex-grow: 0;

Сделать последнего ребенка есть flex-grow: 1;

Помещенный #sidebar и #post_box в #content, а затем

#content { display:flex; align-items: stretch; align-content: stretch; } 
#sidebar { float:left; width:280px; flex-grow: 0; } 
#post_box { float: left; flex-grow: 1; }