Streaming live at 10am (PST)

Fixed the right column

Hello!
Hopefully, I’m added this to the right area to ask.

I’d like to have a right column fixed in view as the left column scrolls. I’ve made the header sticky and that’s fine, just a bit confused how to make the right column fixed in view though.

here’s a link to my work in progress
https://preview.webflow.com/preview/esure-example-breakpoints?utm_medium=preview_link&utm_source=designer&utm_content=esure-example-breakpoints&preview=9482ec6ac2c56a88f8e08a1cc47ba938&mode=preview

Kind regards


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

(Overflow is on hidden) :blush:

Ok for you ? If you have any questions tell me.

Thanks so much for the quick reply back. Really good of you. I’ve turned off the overflow hidden, whoops!
Doing so I just need to check as it’s still not completely how I’d pictured it.

Ideally, I’d like the grey RHC to be fixed so that the content inside it doesn’t scroll up as the LHC content does. Also With the column, I wanted to it to span the full browser height which I thought if I added 100vh it would do that though when I reach the bottom of the screen scrolling it lifts up revealing the white space.

Hopefully, that makes sense. :slightly_smiling_face:

Here’s how it is now
https://preview.webflow.com/preview/esure-example-breakpoints?utm_medium=preview_link&utm_source=designer&utm_content=esure-example-breakpoints&preview=9482ec6ac2c56a88f8e08a1cc47ba938&mode=preview

Thanks again and best regards

If i understand :
Define a height for your “header Section”
Then
Define the same height on your sticky element (90px on my exemple)

Ok for you ?

Ho my bad, i think you should use fixed element and not sticky for what u want.

Hi Louis,
Thanks again for your help here. Just back on it now though still not having much luck. I have got the white space below the RHC sorted now though still a bit unclear how to get the RHC to remain fixed when the LHC scrolls whilst also keeping within the max 1140px width of the main content section.

I notice when I set RHC to “Fixed” It then comes out of the main content section causing the LHC is span wider underneath the RHC where I’m trying to maintain the layout as though the RHC was still in the main content area…

Jeez… I’m confusing myself. I’ll carry on playing around to learn as I go. Here’s how it is right now
https://preview.webflow.com/preview/esure-example-breakpoints?utm_medium=preview_link&utm_source=designer&utm_content=esure-example-breakpoints&preview=9482ec6ac2c56a88f8e08a1cc47ba938&mode=preview

All the best

I think I’ve got it now :slightly_smiling_face:

I’ve made the main content section ‘Relative’ positioned with the LHC ‘Static’ and the RNC ‘Sticky’ this works, just need to adjust the width of the RHC now. I also need to read up more on this as I’ve got it working though not 100% sure why :laughing:

Here’s the latest
https://preview.webflow.com/preview/esure-example-breakpoints?utm_medium=preview_link&utm_source=designer&utm_content=esure-example-breakpoints&preview=9482ec6ac2c56a88f8e08a1cc47ba938&mode=preview

1 Like

Haha, i undertand. I’m glad it works for you. Yes, that’s how we learn. If you have any questions or need help, contact me here: louisdarques@gmail.com. See you soon . :wink:

1 Like