Как сверстать макет на CSS?

Question

[WEBIVAN]

Никак не могу сверстать следующий резиновый макет:
Есть 3 колонки.
Ширина второй фиксированная, например 400px.
Остаток ширины делится между первой и третьей 80%/20%.
Т.е. например, если ширина рабочей области 1400px, колонки 800px, 400px, 200px
если ширина рабочей области 1000px, колонки 480px, 400px, 120px и.т.п.
Буду признателен за идеи, как это сделать.

Answer 1

[warsoul]

<div style="margin-right:400px; overflow: visible;">
<div style="width: 20%; float: right; margin-right: -400px; background:yellow;">
3
</div>
<div style="width: 80%; float: left; background:blue;">
1
</div>
<div style="width: 400px; margin-left: 80%; background:green;">
2
</div>
</div>

Comments

[WEBIVAN]

Вроде бы работает как необходимо. Благодарю.

Answer 2

[Makito]

Вот так вроде то что вам нужно.
Если смущает ширина 70-10-20 то можно заменить на 80-0-20, все равно будет однотипно.

Comments

[Softlink]

Только вместо таблицы дивы и display: table > display: table-cell ;)

[warsoul]

Я надеюсь вы профессионально версткой не занимаетесь :)

[Makito]

Ой блин извиняюсь :) Прочитал «колонки» и в уме автоматом прибавил «сверстать таблицу».

[Softlink]

Ничего, вы не один, я только сейчас догнал, что надо оставшееся делить между собой.

[Softlink]

Еще можно немного экзотики в виде flexbox jsfiddle.net/Softlink/8ctuY/
Работает в хроме, опере и в ФФ(если в about:config найти параметр layout.css.flexbox.enabled и переключить его в значение true ).

Answer 3

[nick4fake]

А точнее? По высоте — одинаковые?

Comments

[WEBIVAN]

Высота фиксированая и одинаковая для всех.