Stretch left side of image outside container to edge of the page

Question

Normally I\'m quite good at CSS but I cannot figure out how to do this particular layout.

I have a container with a maximum width of 1,400 pixels. The left and right ma

Answer 1

Since the red div has a max-width of 1400px then the space left will be 100vw-1400px so the space on one side will be the half. You can simply make the padding-right of the green box to be (100vw - 1400px)/2 which is also 50vw - 700px.

Here is an example where I consider 600px instead of 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>

You can also use it as margin-right of the inner 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>