Streaming live at 10am (PST)

Container div with absolute positioning jumping around

#1

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)

#2

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

#3

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

#4

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

#5

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.

#6

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
#7

That was the one, thanks buddy!

1 Like