Как сделать этот макет?

Question

[Bruno22]

Есть, например, контейнер с шириной 1800px. В контейнере есть три колонки. У той, что посередине, ширина всегда должна быть 1000px, и она всегда должна оставаться посередине контейнера. Остальные два никак не должны на неё влиять, даже если их ширина больше. Они могут наезжать на среднюю колонку, но не влиять ни на её позицию, ни на её ширину. 

Я бы мог организовать это абсолютным позиционированием, но хотелось бы обойтись без него. Есть такая возможность?

Comments

[iBird Rose]

оно? https://jsfiddle.net/sLoha84p/

[Bruno22]

iBird Rose, на этом я и остановился. Сейчас попробуй засунуть в одну из крайних колонок блок шириной 500px. Центральный сдвинется. https://jsfiddle.net/h0bvpudL/1/

Подозреваю, все-таки придется юзать absolute(

[iBird Rose]

Bruno22, ну это логично. да. тут абсолютом, чтобы вообще ни на что не реагировал

[selk07]

попробуй использовать CSS Grid, конечно если подойдет https://codepen.io/selk/pen/PoGZMpv

[Артем Золин]

Она не может быть все время 1000px, потому что есть мобильные устройства с шириной экрана 320px или о адаптивности вы не задумываетесь?

[Bruno22]

Артем Золин, я преемствую принцип последовательности: сперва сделай на этом разрешении, потом переходи к остальным. Если так хочется поумничать - прошу в другие ветки.

[Bruno22]

Леонид, было бы что обдумывать. Очевидно, что ничего сложного в адаптации не будет. Пробовал гриды, не получилось. Пока вариант с absolute самый оптимальный.