Container div with absolute positioning jumping around

Hey there!
I’ve got some weird behaviour going on with an absolute positioned flex box.

Basically, what I’m trying to do, is get to this layout:

Right now I’m working on the images (slider).
As you can see, the images basically fall out of the grid, so to do this, I’m creating a flexbox container with 100 vw and an absolute positioning. The left box is going to be empty, the right box is going to contain the images. However, I get super weird behaviour from the divs, they are basically jumping around and sometimes not even showing.

I’m, talking about the unnamed div boxes, since it’s still WIP:

Any ideas on this?
Also, I’m might taking a completely dumb approach to building this :slight_smile:
If that’s the case, please let me know.

When checking out the read-only link, make sure to select the Cities Template page.
Also, I just noticed that the issue doesn’t seem to be happening in Safari, mainly Chrome.

Thanks all.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Your preview link doesn’t work for me, can you please resubmit?

Fixed, thanks for the heads up!
A double ‘https://’ doesn’t work well :slight_smile:

To make your absolutely positioned elements work their parent has to be anything other than static. So set your site-mid to relative.

Hey man, thanks for taking a look.
Unfortunately, when I do that, the whole block jumps to the right and the width of the site gets messed up. I need the div block to be aligned all the way to the left of the screen.
Any thoughts on that?

Thanks again.

Alright, try removing relative positioning from your site-mid and give the same to the site-holder and see if that’s better.

1 Like

That was the one, thanks buddy!

1 Like