Создаем Minimum Margin. Минимальное поле.

К сожалению, в мире CSS отсутствует min-margin (минимальное поле). Меня это устраивало до тех пор, пока не возникла необходимость в этом необычном свойстве. Поразмыслив и воспользовавшись Google, я нашел решение, которое и предлагаю ниже.

Так в какой ситуации может потребоваться min-margin? Перейдите на «demo» и сравните версии страниц с min-margin и без ( измените разрешение экрана-чтобы увидеть разницу). Как видно из демо, при любом разрешенни min-margin равен 200 px.

Если вы считаете, что это может пригодиться и вам, отлично, начнем.

HTML

При создании HTML все просто.

<div id="wrapper">  
  
    <div class="padding">   
  
        <div id="content">  
  
                <!--Content-->  
  
        </div>  
  
    </div>  
  
</div>  

Полагаю, вы знаете, как центрируются веб-сайты (Как выровнять блочный элемент по центру страницы) и вам должны быть наблюдали блочные элементы с идентификаторами #wrapper и #content. Сюда мы добавляем третий блочный элемент с классом padding (некорректно, но и ладно).

CSS

Прежде всего, приведу стили, которые делают возможным создать min-margin:

HTML

#wrapper { text-align:center; padding-right:200px; }  
  
.padding { width:960px; margin:0px auto; }  
  
#content { width:760px; float: right; }   

Роли, которые они выполняют:

1. #wrapper – блок, в котором содержится все остальные блоки. Правый отступ (padding-right) этого блока должен иметь ту же ширину, что и планируемое минимальное левое поле (min-margin см. demo).
2. Блок с классом .padding центрируем. Его ширина - это сумма правого отступа (padding-right) блока #wrapper и ширины блока #content.
3. Блок #content смещается к левой стороне блока .padding и определяет действительную ширину вашего контента. Именно этот элемент выглядит как полностью центрированный.

Благодаря вышеперечисленным преобразованиям у вас будет функциональное минимальное левое поле (min-margin) и центрированный веб-сайта.

Альтернативный метод по созданию минимального поля

Вот техника, которая упрощает этот процесс до смехотворности, достаточно вместо margin использовать padding.

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

CSS

#wrapper { text-align:center; padding:0 150px; }  
  
#content { width:760px; margin:0px auto; }   

В IE, как и в оригинале, сохраняются горизонтальные полосы прокрутки.

По материалам сайта buildinternet.com