Как реализовать такую структуру каркаса при адаптивности?

Всем привет, друзья!

Есть вот такой макет:
59e4c6ead5121361364216.png
Контент выравнивается посередине.
Вся проблема в шапке: центральная часть выравнивается посередине, а правая и левая части раскиданы по сторонам.
Ширина правой и левой колонок неизвестны. Центральная часть равна ширине контента, допустим 1200px.

При адаптивности правая и левая колонки двигают центральную часть на соответствующее расстояние:
59e4c7bcdc18f795982217.png

Как так сделать?
Если центральной части задать:
max-width: 1200px;
margin: 0 auto;

а правую и левую части раскидать при помощи float, либо при помощи position: absolut; и left: 0 и right: 0 для соответствующих сторон, то ничего не получится при адаптивности, т.к. при float блоки перенесутся на разные строки, а при позиционировании залезут друг на друга.
В общем, вот https://jsfiddle.net/lokdmt/upn3d3rg/ накидал структуру, думаю понятно объяснил.

P.S. не обязательно прошу за меня решить, буду рад хотя бы просто совету куда смотреть. Спасибо!

P.P.S. Кнопку "Отметить решением" знаю, поэтому не забуду отблагодарить)
  • Вопрос задан
  • 419 просмотров
Решения вопроса 1
@aslanovich
Web/Art Designer. Front+Back-end Geek
Переходите на флексы, забейте уже на этот еб... IE
https://codepen.io/svassr/pen/gbeGaw
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы