Добрый день!
Как реализовать такое подскажите плз
Есть изображение в блоке с шириной 30%, прижатое слева.
Сверху 2 блока находящихся в контейнере.
Блок слева должен не выходить за рамки контейнера и за рамки изображения.
Сейчас разметка примерно такая:
<div class="content">
<div class="image">
</div>
<div class="tabs">
<div class="container">
<div class="block1">
</div>
<div class="block2">
</div>
</div>
</div>
</div>
Нужно чтобы содержимое block1 не выходило за рамки контейнера и за рамки изображения под ним.
Сейчас оно вываливается в адаптиве, мешает.
Прописать ширину не получилось. Пробовал писать одинаковую ширину для изображения и для block1 за минус отступы.
Содержимое block1 в процессе адаптива постоянно вываливается, потому что container имеет magin: 0 auto и неизвестно размер марджина, чтобы задать в ширину.
Думаю можно сделать более сложные вычисления с помощью calc, но хочется более правильного изящного решения.
Методы js не предлагать, только pure css.

Как реализовать такое подскажите плз
Есть изображение в блоке с шириной 30%, прижатое слева.
Сверху 2 блока находящихся в контейнере.
Блок слева должен не выходить за рамки контейнера и за рамки изображения.
Сейчас разметка примерно такая:
<div class="content">
<div class="image">
</div>
<div class="tabs">
<div class="container">
<div class="block1">
</div>
<div class="block2">
</div>
</div>
</div>
</div>
Нужно чтобы содержимое block1 не выходило за рамки контейнера и за рамки изображения под ним.
Сейчас оно вываливается в адаптиве, мешает.
Прописать ширину не получилось. Пробовал писать одинаковую ширину для изображения и для block1 за минус отступы.
Содержимое block1 в процессе адаптива постоянно вываливается, потому что container имеет magin: 0 auto и неизвестно размер марджина, чтобы задать в ширину.
Думаю можно сделать более сложные вычисления с помощью calc, но хочется более правильного изящного решения.
Методы js не предлагать, только pure css.
