Как создать макет с двумя столбцами в CSS, где один столбец сжимается до его содержимого, а другой расширяется, чтобы заполнить оставшееся пространство?

Question

У меня есть две <div> на моей странице. Я хочу расположить их рядом, чтобы первый (правый) уменьшался до его содержимого (неизвестная ширина), а второй (слева) расширялся, чтобы заполнить оставшуюся горизонтальную ширину.

Два столбца не обязательно должны быть равными по высоте.

Кроме того, я хотел бы создать промежуток в 5 пикселей между краями двух полей.

Возможна ли эта раскладка без использования таблицы?

EDIT:

Вот настольная версия , чтобы показать вам поведение, которое я ищу.

Answer 1

Я думаю, что один из моих ответов на другой вопрос решает это:

xHTML / CSS: Как заставить внутренний div получить ширину 100% минус другой div div

Я правильно понимаю ваш вопрос?

Answer 2

http://innonesen.se/test/l-41-mod/

Это должно сделать (проверено только на IE6 и Opera). Существует дополнительная особенность, заключающаяся в том, что основной контейнер перестанет расширяться, когда ширина боковой панели меньше 100 пикселей.

http://innonesen.se/test/l-41-mod/no-right.html

P.S. извините, я не могу перейти по URL-адресам .. мой представитель слишком низкий.

Answer 3

Да, это так! Вы можете плавать в первом столбце слева и играть с полями, чтобы создать свой разрыв.

Answer 4

Конечно, вот две разные скрипки , показывающие, как вы можете это сделать. В примере #float используется float: left и затем margin-left для другого div, равного ширине #float.

#absolute использует один абсолютный столбец фиксированной ширины, а затем другой столбец устанавливает поле слева, равное ширине столбца #absolute.