Как сделать двухколончатый макет с фиксированной максимальной шириной одного блока?

Question

[Snewer]

Здравствуйте!

Есть контейнер .container, в нем два блока .div1 и .div2
У div1 есть максимальная ширина, скажем, 1200px. У div2 есть минимальная ширина, скажем, 200px.
Блоки должны занимать всю ширину контейнера, но учитывая их максимальную и минимальную ширину.



Например:

container: 2000px
div1: 1200px
div2: 800px

container: 1200px
div1: 1000px
div2: 200px;

Получается сделать таблицей, но ведь верстать таблицей не хорошо? Как сверстать? Спасибо!

Answer 1

[Андрей Никифоров]

Зависит от требований заказчика, я считаю что рано еще использовать flex`ы, хоть и поддержка ie 9, зачем переходить на новые технологии которые работают, но плохо на старом "оборудовании" ?
Юзай табличку, от одной таблицы плохо не будет

Answer 2

[Александр]

Попробуй флексбоксом, у него есть моменты для элементов чтобы они соблюдали пропорции.
html5.by/blog/flexbox
Смотри там внизу страницы, то, что для дочерних элементов.

Comments

[Snewer]

Флексбокс не совсем подходит для широкого круга лиц (поддержка браузерами)

[Александр]

тупит он только в Internet explorer'е

[Александр]

насколько я знаю

[Snewer]

Александр: нельзя отказаться от IE

[Александр]

полагаю 99% это уже сделали даже в пользу "Амиго" ))

[Александр]

Как хочешь в общем. Я флексы использую, и тот микропроцент что сидит с IE пусть видит сие безобразие так как им это показывает их стандартный браузер. Настаивать я не намерен.

[Snewer]

Александр: если бы)

[Snewer]

Александр: я понял вас, нам это не подходит. спасибо)

[Сергей delphinpro]

Степан Романов: не подходит молоток - берите старый добрый кирпич.
Т.е. эмулируйте таблицу - display: table, display: table-cell;

Answer 3

[Sergey Vydayko]

display: table, и строй как нужно;
но я лучше бы заюзал flax-box;

Comments

[Sergey Vydayko]

max-width min-width кстати тебе помогут