Enforce a “min-margin” for a fluid layout

Question

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:

projects.thomasrandolph.info

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 1

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.

Answer 2

If you don't use a border for the element you can use it to define a "min-margin".

.center
{
margin: 0px auto;
border: transparent solid 30px;
}

P.S. I know this is an old question, but the OP also commented this month.

Answer 3

Give exact width and height to class center. then set position to absolute: lets say we wanna set width:400px; and height:300px; try following piece of code for center

.center
{
postion:absolute;
width:400px;
height:300px;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
}