Резиновый шаблон

Чтобы сделать резиновый шаблон, вам нужно изменить единицы измерения ширины у селекторов #leftcol и #rightcol, а именно, вместо пикселей установить проценты. А для селектора #wrap указать минимальную ширину min-width, при которой будет появляться горизонтальная полоса прокрутки. Например, возьмем фиксированный шаблон с тремя колонками, в файле style.css укажем следующие свойства для селектора #wrap:

#wrap {
    background-color: white;
    min-height: 100%;
    position: relative;
    min-width: 700px;
}

И для боковых колонок вместо 180px установим ширину, равную 20%.

#leftcol {
    width: 20%;
    float: left;
}

#rightcol {
    width: 20%;
    float: right;
}

Посмотреть примеры для резинового шаблона можно, перейдя ссылкам:

Все шаблоны для фиксированного макета находятся в папке fix, для резинового макета в папке float данного учебника.


Видео к уроку

Комментарии