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.

Vasos

what if you give the main container div a fix width with margin auto? This will always keep the content in the middle in any resolution (but width won't be less than specified width) - you can maintain background image by giving it to the parent elements. Hope it's clear what I mean :) – Blagoveshchensk

A mockup of what it should look with 1024px width vs 1920px width would make this clearer. – Animosity

@Animosity I've added some screencaps of how it's behaving right now at various resolutions, and how I want to it act. let me know if it helps or not. – Vasos

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.

Vasos

From my quick lookup for suggestions on this, I saw yours (wrapper with margins) and the slightly more resource intensive solution of using width: calc(100%-80px) together with a max-width attribute. I didn't want the extra wrapper and went with the calc solution because it keeps all controls inside the relevant element. – Sackett

It's also worth noting that calc is not well supported in older browsers (or any environment where CSS3 is not supported) – Vasos

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.

Merriweather

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;
}

Arabelle