Positioning elements directly above each other

Hey there!

I’m having trouble getting the marquee div (the red one) to align directly above the home columns. It appears fine on my screen, but when I test it on a larger display, the marquee floats to the center. How can I ensure it sits directly above the home columns? (Also shown in the picture below?)

Thanks in advance for your help!


Here is my site Read-Only: ** Webflow - BC: Testing **
(how to share your site Read-Only link)

So, I was able to do what I think you are trying to do… But this site is set up in a very non-best-practices sort of way. Every single element is either Absolute, Static, or Fixed positioning. It’s laid out like… a rasterized poster image rather than a website.

That said, you can fix this by putting the marquee and the columns within a div together.
image

Then set the div to position:absolute bottom height:50%
image

Then set the marquee to be top anchored with 0% offset
image

Change the Columns to be height:100% instead of that fixed 400px height, same for each of the column containers within it.

Again, this is a very weird layout to me and it’s not going to be super responsive on different screen sizes, but the fix I gave you here does help with that a bit. The mobile viewports would require some fixing as well, because the way they’re currently set up, this fix will have to be adjusted.

You should learn some best practices for positioning content without just forcing it into place with the sticky, fixed, and absolute positioning properties. It will prevent these kinds of things from being an issue at all and things will fall into place where you expect them to, more often than not.

@vinberdon, thank you so much!! This helped, so much better! And thanks for your feedback, appreciate it. It’s my first time using webflow so very good to know :sweat_smile:

Do you think it’d be worth rebuilding the home page and look to use best practice techniques instead?

thank you so much!!

No problem (: This was an interesting one, so it was fun to fix!

Do you think it’d be worth rebuilding the home page and look to use best practice techniques instead?

Honestly, I do. It will prevent a lot of future headaches and it will ensure that it looks great on every device. With so many different aspect ratios, using so many fixed dimensions will basically guarantee that it will break on something… Not to mention how different browsers may interpret things. It won’t be that bad, though. Start with the highest up the hierarchy in elements and start making them position:relative; it will be scary because everything will break but just start changing attributes like floats and clears and percentage height/width until you get the foundation set then work on the child elements and get them to render properly. It’ll be a lot of work but I think it will be worth it. I wouldn’t rebuild it from scratch, though. You will learn more by fixing it the way it is (:

Amazing, thank you! Will do - appreciate you help a lot!