Как растянуть только одну половину блока?

Question

[spone379]

Здравствуйте, прикрепляю фото части макета s020.radikal.ru/i712/1603/ad/2e324a4078c1.jpg
Сделал блок(у которого белый фон), задал ему класс, который центрирует содержимое по ширине макета, и у него внутри два инлайн-блока по 50% ширины. Карта это не фон, а просто картинка. Вроде всё хорошо, но тут увидел, что карта должна тянуться. И тут мне нужна ваша помощь.

Comments

[spone379]

Serj-One: Вертикальные бирюзовые линии это ширина макета. А карта тянется на всю ширину

Answer 1

[Serj-One]

Родителю для карты - position:relative; Карте - ширину с запасом и абсолютное позиционирование от левого края родителя. Всей секции - overflow-x: hidden, чтоб скрыть выступающую вправо часть карты.

Answer 2

[Сергей delphinpro]

карту сделайте на всю ширину. внутрь еще один блок с фоном на половину (градиентами)
внутрь контейнер с ограничением по ширине, внутрь два блока по 50%, в первый - информацию

зы
Да, карта будет с абсолютным позиционированием, если не поняли

https://jsfiddle.net/2o4srcL0/

UPD
https://jsfiddle.net/2o4srcL0/1/

Comments

[spone379]

Долго вникал в ваш код, чтобы полностью его понять)
И всё круто, но вот в чём беда - картинка тянется на все 100%, 50% из которых скрыты. А должна отображаться полностью(если макет не обманывает)

[Сергей delphinpro]

spone379: Картинка? Обычно вставляют живую карту от гугла или яндекса.
В любом случает, достаточно дать картинке/карте ширину 50% и левую позицию 50%. Тогда и необходимость в закрашивании половины блока отпадет (там где linear-gradient).

Answer 3

[spone379]

Чтобы получилось всё идеально(на мой взгляд), я сделал вот так:
https://jsfiddle.net/psyms6nf/