Растянуть левую сторону изображения за пределами контейнера до края страницы

Question

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

У меня есть контейнер с максимальной шириной 1400 пикселей. Для левого и правого полей установлено значение auto, поэтому, когда область просмотра превышает 1400 пикселей, контейнер централизуется.

Затем у меня есть изображение вне контейнера, рядом с которым находится div, изображение занимает 40% области просмотра, а div занимает оставшиеся 60% области просмотра.

То, что я хочу, это div внутри 60% -ой части, который не выходит за пределы правого края контейнера в 1400 пикселей выше.

Диаграмма может прояснить ситуацию:

Мой CSS пока:

div.container {
  max-width: 1400px;
  margin: 0 auto;
}

img {
  display: inline-block;
  width: 40%;
}

div.right {
  display: inline-block;
  width: 60%;
}

div.inner {
  ???
}

Для div.inner Я пробовал вариации процентов и calc, но безрезультатно. Для пояснения все на макете в порядке, кроме розовой рамки, которую я не могу выровнять с правым краем красной рамки.

Answer 1

Так как красный div имеет максимальную ширину 1400px, то оставшееся пространство будет 100vw-1400px, поэтому пространство на одной стороне будет половиной. Вы можете просто сделать padding-right зеленой рамки (100vw - 1400px)/2, что также 50vw - 700px.

Вот пример, где я рассматриваю 600px вместо 1400px:

* {
  box-sizing:border-box;
}
body {
  margin:0;
}

div.container {
  max-width: 600px;
  margin: 0 auto;
  background:red;
  height:50px;
}

img {
  display: inline-block;
  width: 40%;
  height:50px;
  background:yellow;
}

div.right {
  display: inline-block;
  width: 60%;
  padding-right:calc(50vw - 300px);
  background:green;
}

div.inner {
  background:blue;
  height:50px;
}

<div class="container">
</div>
<img src="" ><div class="right">
<div class="inner">
</div>

</div>

Вы также можете использовать его как margin-right внутреннего div:

* {
  box-sizing:border-box;
}
body {
  margin:0;
}

div.container {
  max-width: 600px;
  margin: 0 auto;
  background:red;
  height:50px;
}

img {
  display: inline-block;
  width: 40%;
  height:50px;
  background:yellow;
}

div.right {
  display: inline-block;
  width: 60%;
  background:green;
}

div.inner {
  background:blue;
  height:50px;
  margin-right:calc(50vw - 300px);
}

<div class="container">
</div>
<img src="" ><div class="right">
<div class="inner">
</div>

</div>