Provide a “minimum margin" for liquid layout

Question

I am trying to create a site that works best with fairly high resolutions, but also slides as much as possible when the resolution gets lower.

I'm not even sure which code to copy here, so the link is:

projects.thomasrandolph.info

I need the left side of #page to stop the sliding left side on the right side of #logo plus a few pixels. This is 13.25em left of the page.

I set the left margin of #page to 13.25em , which looks correct, but at higher resolutions the page looks weird because it is not centered. I want to keep centering, but also to stop its sliding at a certain moment.

So, I want the left side to stay no further:

I would prefer VASTLY. If I could do this with pure CSS for the two elements I noted here, but I can add HTML as needed.

I struggled 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 he is currently looking at two resolutions:

1920

1280

Here's an image of how he should look at resolutions below about 1540 :

Any resolution above ~ 1540 will smoothly slide to the right, as it does now.

Answer 1

What I did was add a wrapper around the #page . This is not what I would like in an ideal world, but I would like a min-margin in an ideal world (or at least margin: min() )!

On the wrapper, I applied margin: 0 13.25em; where 13.25em was where I wanted #page to stop sliding to the left. Equal margins on both sides leave #page centered without shifting 13.25em to the right. Since I used the fields instead of filling, the right side can overflow the browser without causing a horizontal scrollbar to appear.

This seems to be a good solution. I initially looked for something smarter without adding HTML, but it was simple enough and seemed efficient enough, which seemed to be worth the extra markup.

Answer 2

If you do not use a border for an element, you can use it to define a "minimum margin".

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

PS I know this is an old question, but the OP also commented on this month.

Answer 3

Give the exact width and height for the center. then set the position to absolute: let's say we want to set the width: 400 pixels; and height: 300 pixels; try to execute a piece of code for the center

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