I am in the process of building a website that requires a fixed sidebar on the right side of the screen, occupying 100% of the page. I aim to have my main container's width set at 100%, adjusting to fill the remaining space after taking into consideration the width of the sidebar. It is crucial that the sidebar remains stationary as users scroll down the page, and I also want the height of the sidebar to be based on a percentage value. How can I achieve this design?
If I opt for using "Position: fixed," it would remove the sidebar from the flow, causing the container to span the entire width of the page without considering the sidebar's width. This presents challenges when attempting to apply "text-align: center."
Visual representation of my desired layout: