Fixed div that follows the Bootstrap container using CSS calc

Are you looking to create a fixed div that follows the Bootstrap container? This is useful and much more user friendly than putting a fixed HTML element on the very right edge of the browser window. Using a regular percentage to move an element off the browser window edge is useful, but the space between the window and your content can vary greatly. I came up with a solution that creates a fixed div that follows the Bootstrap container using CSS calc.

This works by making the elements fixed and using the right CSS property like you normally would. By adding calc((100% – 750px) / 2) we are getting 100% of the browser window width and then subtracting the width of the container to get the leftover space on each side of the container. We then divide by 2 to get just one half of that space, the space between the browser window’s edge and the container.

Below is a CodePen with the code.

See the Pen Fixed div that follows the Bootstrap container using CSS calc by Justin Friebel (@freebs) on CodePen.