Слава Україні!

Трехколоночный макет

Макет трехколоночного сайта, сверстанного div-блоками html CSS
Это макет трехколоночного сайта, сверстанного div-блоками. Макет имеет "шапку", одну широкую колонку посредине для основного содержимого, две колонки поуже по краям (для меню, рекламных блоков и т.п.) и "подвал" прижатый к нижнему краю браузера. ###Стили Стили можно вынести в отдельный CSS-файл:

<style>
* {margin: 0; padding: 0;} /* обнуляем отступы */
html,body {
    height: 100%; /* задаем высоту тела документа */
}
.main { /* основной блок, который должен растянуться до подвала */
    min-height: 100%; /* задаем минимальную высоту основного блока */
    overflow: hidden;
}
* html .main { /* хак для ie6, т.к. не понимает min-height */
    height: 100%;
}
.hFooter { /* это распорка в основном блоке - резервируем место для подвала */
    height: 150px; /* высота нашего подвала */
    clear: both;
}
.footer { /* подвал */
    background: #0099ff; /* цвет фона подвала (для наглядности)*/
    height: 140px; /* высота подвала */
    margin-top: -140px; /* делаем отрицательный отступ по высоте равный высоте подвала,
                           чтобы четко вписаться в размер экрана */
}

.left {
    float: left;
    width: 210px;
    margin-left: 10px;
    border: 1px solid #0099ff;
    height:300px; /* При наполнении - убрать */
}
.content {
    margin: 0 240px 0 240px;  /*Отступ справа и слева */
    border: 1px solid #0099ff;
    height:300px; /* При наполнении - убрать */
}
.right {
    width: 210px;
    float: right;
    margin-right: 10px;
    height:300px; /* При наполнении - убрать */
    border: 1px solid #0099ff;
}

.header {
    height:100px;
    padding: 0 15px;
    background: #0099ff; /* цвет фона подвала (для наглядности)*/
    margin-bottom: 10px;
}
</style>
###Разметка:

<div class="main">
    <div class="header"> Шапка </div>
    <div class="left"> Левая колонка </div>
    <div class="right"> Правая колонка </div>
    <div class="content"> Содержание </div>

    <div class="hFooter"></div>
</div>
<!-- end main div -->
<div class="footer"> Подвал </div>
Предыдущая заметка Постраничная навигация на php
Следующая заметка Древовидное меню

Важлива інформація

Міністерство оборони
України
з 24.02 по 30.11
втрати противника
орієнтовно склали:
328760 ( +1180 ) особового складу
5551 ( +13 ) танків
10340 ( +28 ) бойових бронемашин
7909 ( +1 ) артилерійських систем
910 ( +0 ) РСЗВ
600 ( +0 ) засоби ППО
323 ( +0 ) літаків
324 ( +0 ) гелікоптерів
10361 ( +13 ) автомобільної техніки
22 ( +0 ) кораблі / катери
1567 ( +0 ) крилаті ракети
5954 ( +10 ) БПЛА
1124 ( +3 ) спец. техніки
4 ( +0 ) установок ОТРК/ТРК
1 ( +0 ) war.submarines

Поиск