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

Question

[Dmitry]

Есть макет вот с таким интересным блоком:


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

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

Чтобы понятней было, распишу подробней как делал я:
Задавал контейнер на всю ширину, внутри 2 блока с пропорциями 5/12 и 7/12 левый и правый соответственно, правому выставлял бэкграунд со свойством bacground-size: cover; Это был самый очевидный вариант сверстать этот блок, но тут проблема в том, что текст в левом блоке, теперь никак не выровнять четко по сетке, а нужно чтобы он совпадал с ней, иначе он иден не по одной вертикали с другим текстов (на картинке этот текст выше).

Comments

[Ivan Stroykin]

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

Answer 1

[GreatRash]

Comments

[Dmitry]

Правый блок должен быть до края области просмотра, там картинка далеко не по сетке выстраивается, в этом вся суть.

[GreatRash]

Dmitry: Зачем ему быть до края области просмотра?

[Dmitry]

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

[GreatRash]

Dmitry: Пофантазируйте хоть немного, совсем со своими бутстрапами верстать разучились...
codepen.io/GreatRash/pen/adOYep

[Dmitry]

GreatRash: Пробовал похожий вариант, только элементу ::after (в вашем примере) высчитывал left исходя из пропорции 7/12 блока к сетке: 100%-(100%*7/12)+gutter. Я наверное его и буду использовать, спасибо за отклик.

Answer 2

[Сергей Вирченко]

много вариантов, можно попробовать оттолкнуться от подобного:

<div style="position: relative">
	<div style="width: 1024px; margin: 0 auto">
		<div style="width: 500px; height: 100px; background: blue"> text</div>
	</div>
	<div style="height: 100px; width: 50%; position: absolute; right: 0; top:0; background: red;">img</div>
</div>