Обеспечить минимальный запас для макета жидкости

Question

Я пытаюсь создать сайт, который лучше всего работает при достаточно высоких разрешениях, но также скользит как можно левее, когда разрешение становится ниже.

Я даже не уверен, какой код здесь скопировать, поэтому ссылка:

projects.thomasrandolph.info

Мне нужно, чтобы левая сторона #page перестала скользить влево по правой стороне #logo плюс несколько пикселей. Это 13.25em слева страницы.

Я установил левое поле #page на 13.25em, что выглядит правильно, но при более высоком разрешении страница выглядит странно, потому что она не центрирована. Я хочу сохранить центрирование, но также и остановить его скольжение в определенной точке.

Итак, я хочу, чтобы левая сторона ушла не дальше, чем это:

Я бы БЫСТРО предпочел бы, если бы я мог сделать это с чистым CSS на двух элементах, которые я здесь отметил, но я могу добавить HTML при необходимости.

Я долго боролся с тем, как хотя бы задать этот вопрос, поэтому, пожалуйста, задавайте мне вопросы или редактируйте этот вопрос, чтобы улучшить ясность вопроса.

Обновление:

Вот изображения того, как в настоящее время смотрит в двух разрешениях:

1920

1280

Вот изображение того, как должно смотреть на разрешения ниже приблизительно 1540:

Любое разрешение выше ~ 1540 плавно сдвигается вправо, как и в настоящее время.

Answer 1

В итоге я добавил обертку вокруг #page.Это не то, что я хотел бы в идеальном мире, но я бы хотел min-margin в идеальном мире (или, по крайней мере, margin: min())!

На оболочку я применил margin: 0 13.25em;, где 13.25em был там, где я хотел #page, чтобы остановить скольжение влево.Равные поля с обеих сторон оставляют #page по центру без 13.25em смещения вправо.Поскольку я использовал поля вместо отступов, правая сторона может переполнить браузер, не вызывая горизонтальную полосу прокрутки.

Это кажется хорошим решением.Изначально я искал что-то более «умное», не добавляя HTML, но это было достаточно просто и, кажется, достаточно эффективно, что, похоже, стоит дополнительной разметки.

Answer 2

Если вы не используете границу для элемента, вы можете использовать его для определения «минимального поля».

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

P.S. Я знаю, что это старый вопрос, но ФП также прокомментировал этот месяц.

Answer 3

Дайте точную ширину и высоту центру класса. затем установите абсолютное положение: допустим, мы хотим установить ширину: 400 пикселей; и высота: 300 пикселей; попробуйте следующий фрагмент кода для центра

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