How to pull an element out of its container to the left OR right browser edge when image ISN'T in a centred container

Question

I'm trying to create a layout as shown in the image here, where:

I have a three column layout
A div element is as wide as two columns
In the div that is two columns wide is an image which i need to pull out to the left to the browser border, and the right side to the image to remain as wide as the two columns to it stays "stuck" to the right

I've used this code, and applied it to the image within the column, but do be honest I don't understand what it does:

margin-left: calc( -100vw/2 + 100%/2);

HTML

<div class="wrapper">
<div class="col-1"><img src="blabla" /></div>
<div class="col-2">Content</div>
</div>

CSS

.wrapper {
max-width: 1400px;
display: block;
margin: auto;
}

.col-1 {
float: left;
width:66.666%;
}

.col-2 {
float: left;
width: 33.333%;
}

.col-1 img {
display: block;
width: 100%;
height: auto;
margin-left: calc( -100vw/2 + 100%/2);
}

The result is it pulls out to the left browser edge but the right side of the image doesn't remain in place.

I don't understand what i need to do to achieve this layout, and maybe it's not even possible.

https://i.stack.imgur.com/KlJVZ.jpg

This is a lot more complex that you might think. What happens when the viewport is less that the max-width of your container?...What is supposed to happen to the image/content? — Paulie_D, Mar 10 '20 at 16:49
..and is this **actual** content or just a styling thing?...If it's a background image we have options. Related - https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns — Paulie_D, Mar 10 '20 at 16:49
No, its an actual image. This layout is for certain widths only, on mobile etc the layout stacks, but this layout needs to be responsive when the browser is wide enough to accomodate the content — Steve McC, Mar 10 '20 at 16:51
I think it *could* be managed with CSS-Grid but I'd have to think on it. — Paulie_D, Mar 10 '20 at 16:53

Kosh · Accepted Answer · 2020-03-11T15:15:28.100

It's a simple math:

You have to calculate 2 parameters
1. the shift of the <img> -- (1/2 of viewport width - 1/2 of .wrapper width),
2. width of the <img> -- (100% of .col-1 + shift from the above)

Where
1. width of the viewport -- 100vw
2. width of .col-1 -- 100% of .col-1
3. width of .wrapper -- 150% of .col-1

The <img> is a child of .col-1 so the % dimensions are relative to .col-1 width.

Let's calc
1. shift = (100vw/2 - 150%/2) = (50vw - 75%)
2. width = (100% + 50vw - 75%) = (25% + 50vw)

Please note
margin-left should be negative to shift left so
margin-left = (75% - 50vw)

You may run the snippet in fullscreen and resize the window: it's responsive.

html,
body {
  margin: 0;
  padding: 0
}

* {
  box-sizing: border-box
}

.wrapper {
  width: 80vw; /* for example, may be any */
  max-width: 1400px;
  display: flex;
  margin: auto;
}

.wrapper div {
  border: solid 1px
}

.col-1 {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  width: 66.666%;
  background: #693
}

.col-1-2 {
  width: 50%
}

.col-2 {
  width: 33.333%;
  background: #e43;
}

.col-1 img {
  display: block;
  width: calc(25% + 50vw);
  margin-left: calc(75% - 50vw);
  opacity: .75; /* for example verbosity */
}

<div class="wrapper">
  <div class="col-1">
    <img src="https://picsum.photos/600/300" />
    <div class="col-1-2">Content</div>
    <div class="col-1-2">Content</div>
  </div>
  <div class="col-2">Content</div>
</div>

That's perfect thank you! Can you explain the math? – Steve McC Mar 11 '20 at 10:17 — Steve McC, Mar 11 '20 at 10:17

score 0 · Answer 2 · answered Mar 10 '20 at 17:05

CSS-Grid can come close to what you are looking for...but I'm hesitant on the responiveness of the image.

FWIW.

.super-con {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(auto, 500px)) auto;
}

.super-con div {
  border: 1px solid red;
}

.image {
  grid-column: 1 / span 3
}

.image img {
  width: 100%;
  max-height: auto;
  display: block;
}

div:nth-child(3) {
  grid-column-start: 2;
}

<div class="super-con">
  <div class="image"><img src="http://www.fillmurray.com/150/150" alt=""></div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Looks good but it doesn't seem to pull the image out to the left to remain attached to browser window… — Steve McC, Mar 10 '20 at 17:20

How to pull an element out of its container to the left OR right browser edge when image ISN'T in a centred container

2 Answers2