Как расчитать ширину в div?

Question

[Space]

Центральный блок (красный) делаю фиксированной шириной 1024px и выравниваю по центру margin:0 auto;
Но как мне добавить крайние блоки, и чтобы они бесконечно растягивались, но при том центральный всегда позиционировался по центру?

Answer 1

[Ivanq]

Я бы поставил три блока - левый, средний и правый. Поставить им float: left; Среднему width: 1024px; Левому и правому - width: calc(50% - 512px);

P.S. Пример тут: jsfiddle.net/Ivanq/hL38md04/1

Comments

[Space]

Подскажите, почему при такой конструкции jsfiddle.net/hL38md04/2 box-shadow не работает?

[Ivanq]

Cosmos: Вы ставите box-shadow на элемент, в котором другие элементы его закрывают. Если нужно, поставь поверх еще элемент и на него навесть box-shadow

[Ivanq]

Cosmos: jsfiddle.net/Ivanq/hL38md04/4

Answer 2

[Денис]

jsfiddle.net/3j7ejq7j

<div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

.wrapper {
    display: flex;
}
.wrapper > div {
    flex: 1 100%;
}
.wrapper > div:nth-child(2) {
    flex: 1 0 1024px;
}

Comments

[Ivanq]

Можно и без flex

[Денис]

Ivanq да, можно и display: table, но хочется народ подвигать к более современных методам.