Question

I’ve got my site content inside an 800px-wide div, I’d like that div to be centered on the page until the browser window width extends past certain distance. At that point, I’d like the content to “lock” into place and not continue to center itself, staying a fixed amount from the left edge.

For example, if the viewers window is 900px wide, then they will see my 800px content centered. If the viewers window is 1400px wide, they will see my content 400px from the left side, locked in that spot.

You might be thinking this is a weird question to ask, and it is! But it’s fairly integral to my design for it to work this way.

Answer 1

Setting the container element’s max-width to 1700px (900 + 400 * 2) will ensure that the content is never more than 400px away from the left side, provided that the container is not centered itself.