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

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

Макет трехколоночного сайта, сверстанного 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 по 17.07
втрати противника
орієнтовно склали:
562510 ( +1110 ) особового складу
8238 ( +11 ) танків
15871 ( +9 ) бойових бронемашин
15411 ( +43 ) артилерійських систем
1120 ( +1 ) РСЗВ
893 ( +1 ) засоби ППО
361 ( +0 ) літаків
326 ( +0 ) гелікоптерів
20741 ( +61 ) автомобільної техніки
28 ( +0 ) кораблі / катери
2398 ( +0 ) крилаті ракети
12224 ( +31 ) БПЛА
2586 ( +9 ) спец. техніки
4 ( +0 ) установок ОТРК/ТРК
1 ( +0 ) war.submarines

Поиск