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

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

Макет трехколоночного сайта, сверстанного div-блоками
10-го травня 2012, 21:05
Это макет трехколоночного сайта, сверстанного 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>

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

Міністерство оборони
України
з 24.02 по 07.02
втрати противника
орієнтовно склали:
846650 ( +1340 ) особового складу
9975 ( +10 ) танків
20755 ( +18 ) бойових бронемашин
22785 ( +32 ) артилерійських систем
1271 ( +0 ) РСЗВ
1056 ( +1 ) засоби ППО
369 ( +0 ) літаків
331 ( +0 ) гелікоптерів
36307 ( +96 ) автомобільної техніки
28 ( +0 ) кораблі / катери
3054 ( +0 ) крилаті ракети
24301 ( +116 ) БПЛА
3738 ( +1 ) спец. техніки
4 ( +0 ) установок ОТРК/ТРК
1 ( +0 ) підводні човни