Enforce a "min-margin" for a fluid layout
I'm trying to build a site that works best at fairly high resolutions, but also slides as far left as possible when the resolution gets lower.
I'm not even sure what code to copy in here, so the link is:
What I need is for the left side of #page to stop sliding left at the right side of #logo plus a few pixels. It's 13.25em from the left of the page.
I've set the left margin of #page to 13.25em, which looks correct, but at higher resolutions, the page looks strange because it's not centered. I want to retain the centering but also stop it sliding at a certain point.
So I want the left side to go no farther left than this:
I would VASTLY prefer If I could do this with pure CSS on the two elements I've noted here, but I can add HTML as necessary.
I've been struggling for a long time with how to even ASK this question, so please ask me questions, or edit this question to improve the clarity of the question.
Update:
Here are images of how it currently looks at two resolutions:
1920
1280
Here's an image of how it should look at resolutions below approximately 1540:
Any resolution higher than ~1540 would slide smoothly to the right, as it currently does.
Answer
What I wound up doing was adding a wrapper around #page. It's not what I would want in a perfect world, but I would want min-margin in a perfect world (or at least margin: min())!
On the wrapper, I applied margin: 0 13.25em; where the 13.25em was where I wanted #page to stop sliding left. The equal margins on both sides leave #page centered without a 13.25em shift to the right. Because I used margins instead of padding, the right side can overflow the browser without causing the horizontal scrollbar to appear.
It seems to be a good fix. I had originally been looking for something more "clever" without adding HTML, but this was simple enough and seems effective enough that it appears to be well worth the extra markup.