Как сверстать такой блок?

Question

[Ramzzza]

Вопрос в том, что есть блоки с нормальной шириной, отцентрированные через margin: 0 auto. На фото красными линиями указан этот контейнер. Верхний блок и футер в нем ресайзятся нормально, а вот средний , который с бэкграундом, должен быть на всю ширину экрана, но при этом, чтобы левая часть блока не вылезала за границы основного контейнера.
Сделал на флексах обертку и две колонки с flex-basis: 50%, теперь не могу понять как правильно спозиционировать текст.

Comments

[Евгений]

Смотрю фон растягивает до края, тогда двигай контент падингом слева)

[Ramzzza]

Евгений, при ресайзе блок будет не вровень с основным контейнером

[Евгений]

Ramzzza, как то заумно зарядить)
padding-left: calc(100% - 300px);

[Евгений]

Вместо 300px - укажи ширину до отсечки

[Ramzzza]

Евгений, да, тоже думал об этом. неужели такие блоки это редкость в макетах? у всех разные варианты

[Евгений]

Ramzzza, хотя да, ниже норм совет картинку поставить абсолютом , а я в текст зациклился))

Answer 1

[Максим]

https://codepen.io/topicstarter/pen/jOPGMeL

Есть обычный контейнер - который в моём примере 768px
Есть контейнер шире - в моём случае это 100%
Вот так делается такая вёрстка ...

Comments

[Ramzzza]

у тебя в нижнем блоке текст не выравнивается по верхнему блоку. вопроса ты не понял

[Максим]

Ramzzza, По какому верхнему блоку ? есть подвал - а о каком верхнем блоке речь ?

[Ramzzza]

Максим Ленский, в подвале контент не на всю ширину экрана, как и сверху

[Максим]

Ramzzza, у вас на скриншоте так и нарисовано - что верхний и нижний контент одинаковы по ширине а средний блок на всю ширину - я не понял вас

[Ramzzza]

Максим Ленский, вся заморочка в тексте, которые в юольшом блоке по центру. он должен быть быть ограничен по левому краю, как сверху и снизу

[Ramzzza]

пример с волком в ответе сверху демонстрирует то, что нужно сделать

[Максим]

Ramzzza, понял - момент

[Максим]

Ramzzza, https://codepen.io/topicstarter/pen/jOPGMeL - типа этого ?

[Ramzzza]

Максим Ленский, да!!! это именно то, что нужно! мне кажется, ты меня спас. я третью ночь нормально не сплю , не могу сделать этот блок. а можешь объяснить, что ты изменил по сравнению с тем, что сверху?

[Максим]

Ramzzza, ну я там добавил width в vw и поставил его в absolute и по этому сжимается - ну вот и весь фокус

[Максим]

Ramzzza, только отметь решением

[Ramzzza]

Максим Ленский, не вопрос, спасибо тебе. пойду изучать

Answer 2

[Владимир]

Смотри в фулл экране. Фон с волком задан секции, а контент выровнен в контейнере.

Comments

[Ramzzza]

сложновато для моего понимания, как оно работает)) но это сильно похоже на то, что мне нужно.

[Ramzzza]

можешь объяснить, на что влияет offer:before?

Answer 3

[Алексей]

Блок с серым фоном - обертка на флексах выравниванием по центру. Внтуренний элемент - блок с контентом с шириной равной ширине верхнего блока