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

Question

Взгляните:

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

Answer 1

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

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

У вас будут проблемы, если у вас есть плавающие внутри #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; }