Div at 100% but going past container

[ParagonTwo (Anton)]

Hi everyone,

I’m wanting to have a fixed ‘close button’ with white transparent rectangle going 100% width within a container, currently extends past the container (which I’m not sure why) rather than stay within the container. I’ve tried to play around with all the settings on container, div, body etc but can’t get it to work. Can anyone help me? This is on the CMS Collection Blog Page (see shot attached and website preview below). I’m probably doing something stupid and hopefully an easy fix.

https://preview.webflow.com/preview/charm-website-2020?utm_medium=preview_link&utm_source=dashboard&utm_content=charm-website-2020&preview=d819c9adca66b7048e0f1dae6a80f976&mode=preview

[sam-g]

@ParagonTwo - it’s because the Blog Button Overlay is set to position fixed. I’m not 100% sure I understand your goal, but that property value is causing it to ignore the width of it’s parent and instead is set to the width of the window.

[ParagonTwo (Anton)]

Hi Sam, thanks for your response. So the functionality of the button works how I would like it to work. So the ‘Close button’ stays fixed in place and the content scrolls underneath it. This way readers can close blog at any stage. When I change ‘Close Button’ anything else other than fixed it stays within the container, but then button scrolls with content which is not ideal. I’m not sure how to get it to stay fixed and keep within the container. Hope this makes sense?

[sam-g]

@ParagonTwo - I would consider having the close button outside of the content area and setting it to fixed or just not worrying about it’s position as much. You can solve this with JavaScript, but I think considering other options first is a better idea.

[ParagonTwo (Anton)]

Hi Everyone, anyone reading this having the same issue, this was fixed by selecting Sticky (instead of fixed), and then set the position to 0. Thank you, Sam, for taking the time to help.