Aplicar un “margen mínimo” para un diseño fluido

Intento crear un sitio que funcione mejor con resoluciones bastante altas, pero también se desliza lo más a la izquierda posible cuando la resolución se reduce.

Ni siquiera estoy seguro de qué código copiar aquí, así que el enlace es:

projects.thomasrandolph.info

Lo que necesito es que el lado izquierdo de #page deje de deslizar hacia la izquierda en el lado derecho de #logo más unos pocos píxeles. Son 13.25em desde la izquierda de la página.

Establecí el margen izquierdo de #page en 13.25em , que parece correcto, pero a resoluciones más altas, la página se ve extraña porque no está centrada. Quiero mantener el centrado pero también detener el deslizamiento en un cierto punto.

Así que quiero que el lado izquierdo no vaya más lejos que esto:

alineación izquierda

Preferiría VASTLY si pudiera hacer esto con CSS puro en los dos elementos que he mencionado aquí, pero puedo agregar HTML según sea necesario.

He estado luchando durante mucho tiempo con la forma de HACER esta pregunta, por lo tanto, hágame preguntas o edite esta pregunta para mejorar la claridad de la pregunta.

Actualizar:

Aquí hay imágenes de cómo se ve actualmente dos resoluciones:

1920

1920 res

1280

1280 res

Aquí hay una imagen de cómo debería verse las resoluciones debajo de aproximadamente 1540 :

min margen izquierdo

Cualquier resolución superior a ~ 1540 se deslizaría suavemente hacia la derecha, como lo hace actualmente.

Lo que #page haciendo fue agregar un envoltorio alrededor de #page . No es lo que me gustaría en un mundo perfecto, pero me gustaría min-margin en un mundo perfecto (o al menos margin: min() )!

En el contenedor, apliqué el margin: 0 13.25em; donde el 13.25em era donde quería que #page dejara de deslizar hacia la izquierda. Los márgenes iguales en ambos lados dejan #page centrada sin un cambio de 13.25em a la derecha. Como utilicé márgenes en lugar de relleno, el lado derecho puede desbordar el navegador sin hacer que aparezca la barra de desplazamiento horizontal.

Parece ser una buena solución. Originalmente había estado buscando algo más “inteligente” sin agregar HTML, pero esto era lo suficientemente simple y parece lo suficientemente eficaz como para que valga la pena el margen adicional.

Si no usa un borde para el elemento, puede usarlo para definir un “margen mínimo”.

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

PD. Sé que esta es una vieja pregunta, pero el OP también comentó este mes.

Proporcione el ancho y la altura exactos al centro de la clase. luego establezca la posición en absoluta: digamos que queremos establecer el ancho: 400px; y altura: 300px; intenta seguir la pieza de código para el centro

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