Как сделать div на всю ширину окна браузера внутри div с фиксированной шириной?

Question

[Dimox]

Приветствую.

Есть вот такие два div'а - jsfiddle.net/notszzj0

Необходимо внутренний div растянуть до краев браузера таким образом, чтобы фоновая картинка 300x300 при любой ширине окна браузера была "прилеплена" к левому краю браузера.

Как это можно сделать на чистом CSS?

Мне решение видится только с применением jQuery - отрицательный margin в зависимости от ширины окна браузера.

Answer 1

[LostSenSS]

Такой вариант не подойдёт?
jsfiddle.net/LostSenSS/notszzj0/3

Comments

[Dimox]

Большое спасибо! Это то, что нужно. Только я внес небольшую правку, чтобы этот блок не выпадал из потока - jsfiddle.net/notszzj0/5

Answer 2

[Vadim Bogomazov]

jsfiddle.net/notszzj0/2 ?

Comments

[Dimox]

Нет. Вы невнимательно прочитали, что я написал.

[Иван Гончаренко]

здорово!!! :) успехов ребята

Answer 3

[Павел Радьков]

Отрицательный margin можно динамически вычислять при помощи calc() от ширины окна браузера:

margin-left: calc((100vw - 720px) / -2);

где 720px — это ширина контейнера.

codepen.io/paulradzkov/pen/wBWzyp — вот пример аналогичной ситуации.

Comments

[Dimox]

Это не кроссбраузерное решение.

[Павел Радьков]

Да, IE8 и ниже не поддерживаются

Answer 4

[Иван Гончаренко]

Автор, покажи картинками как тебе надо сделать. Я так и не уловлю суть дела. Выложи скрин в облако.

Comments

[Dimox]

LostSenSS уже подсказал решение.