Как сверстать данный блок правильно?

Question

[Вячеслав Морозов]

Нужно, чтобы серый блок растягивался на всю ширину экрана, но блок справа, с картинкой должен ужиматься под контейнер в 1500px, вместе с содержимым. Не понимаю как сделать это качественно, чтобы было резиново.

Comments

[eternal_blue]

Не совсем понял, покажите как именно это должно сжиматься

[Programiker]

Ага, и снимок всего сайта лучше сделать( или только верхней части).

[Вячеслав Морозов]

eternal_blue, извините, не так выразился. Не должно сжиматься, правый блок и содержимое левого блока должны находиться в одном контейнере, как на макете, чтобы это все можно было резиново растягивать и верстка не ехала

[eternal_blue]

Вячеслав Морозов, а, ну так или флекс или грид, вам что больше нравится?
Вот пример флекс реализации

<div class="container">
    <div class="right-container">Ваш контент справа</div>
    <div class="left-container">Ваш контент слева</div>
</div>
<style>
    .container {
        display: flex; 
    }
    .right-container {
        width: 25%; 
    }
    .left-container {
        width: 75%; 
    }
</style>

Это обычный флекс, загуглите, почитайте руководство

[Вячеслав Морозов]

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

[Вячеслав Морозов]

Moon Presence, https://codepen.io/blurryfacebeat/pen/MWKNOXW

[eternal_blue]

Вячеслав Морозов, тоесть, вам нужно чтобы при уменьшении уменьшался только блок слева, и увеличивалась белая полоса между ним и правым блоком?

[eternal_blue]

Moon Presence, учту

[Вячеслав Морозов]

eternal_blue, нет, между блоком слева и блоком справа полоса неизменна, там margin в 2rem. Смотрите, блок слева должен прилипать к левой части экрана, но текст на нем должен тянуться резиново вместе с правым блоком, вот правый блок не должен прилипать, там должно быть расстояние от правой части экрана. Мне просто нужно как-то поместить правый блок и контент левого блока в контейнер, чтобы это все резиново тянулось и идентично с остальным сайтом.

[eternal_blue]

Вячеслав Морозов, я тогда не знаю как такое сделать, очень сложно выглядит

[Вячеслав Морозов]

eternal_blue, печально, а делать не качественно тоже не хочется

Answer 1

[Вячеслав Морозов]

Модератор, как можно тему поднимать. чтобы она не потерялась внизу?

Comments

[Programiker]

no

Answer 2

[Максим]

Доброго времени. Может блоку с фото задать фиксированную ширину, раз Вы говорите что он должен быть в 1500px.
Для блока с текстом указать относительные единицы типа be.

Comments

[Вячеслав Морозов]

У меня весь код в относительных единицах, rem. Блок с фото не должен занимать 1500px. Контейнер для всего контента сайта равен 1500px, мне нужно как-то поместить туда и блок с картинкой, и блок с текстом, чтобы это все можно было резиново тянуть. Но фон левого блока должен растягиваться на всю ширину экрана.

[Максим]

Если я не ошибаюсь, то тогда в контейнере нужно сделать три одинаковые по размеру блока. Два объединить и написать туда текст. В третий поместить фото. Это можно сделать табличной венской, что устарело, flexbox или grid css

[Вячеслав Морозов]

Максим, но смутно представляю как я свяжу текст и блок с картинкой одним контейнером