Css Seo трехколоночный макет с резиновым контентом и прижитым к низу футером

Css Seo трехколоночный макет с резиновым контентом (оптимизирован под seo - впереди) и прижитым к низу футером

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Макет в три колонки с контентом впереди</title>
  <style type="text/css">
   html, body {
    height: 100%; /* высота HTML и BODY */
    margin: 0; /* обнуление полей по краям страницы */
    padding: 0;
   }
   #wrapper {
    min-height: 100%; /* минимальная высота 100% для обертки */
    height: auto !important; /* для всех браузеров (можно убрать, если поддержка IE6 не нужна) */
    height: 100%; /* для IE6, т.к. он понимает height, как min-height */
   }   
   body {
    color: #000; /* цвет текста страницы */
    background: #fff; /* фон */
    margin: 0; /* обнуление полей */
   }
   #header {
    height: 100px; /* высота шапки */
    background: #fc0; /* фон */
   }
   #cont_wrap {
    float: left; /* вспрытие обертки влево */
    width: 100%; /* ее ширина */
   }
   #content {
    height: 300px; /* высота контента */
    background: #eee; /* фон */
    margin: 0 200px 0 250px; /* боковые поля */
   }
   #menu {
    width: 250px; /* ширина меню */
    height: 300px; /* высота */
    background: #0fc; /* фон */
    float: left; /* всплытие влево */
    margin-left: -100%; /* левое отрицательное поле */
   }
   #sidebar {
    width: 200px; /* ширина сайдбара */
    height: 300px; /* высота */
    background: #c0f; /* фон */
    float: left; /* всплытие влево */
    margin-left: -200px; /* левое отрицательное поле */
   }
   #footer_correct {
    height: 100px; /* высота блока-корректора */
    clear: both; /* прерывание обтекания */
   }
   #footer {
    height: 100px; /* высота футера */
    color: #fff;
    background: #000;
    margin-top: -100px; /* верхнее отрицательное поле */
   }
  </style>
 </head>
 <body>
  <div id="wrapper">
  <div id="header">Шапка</div>
  <div id="cont_wrap">
   <div id="content">Контент</div>
  </div>
  <div id="menu">Меню</div>
  <div id="sidebar">Сайдбар</div>
     <div id="footer_correct"></div>
  </div>
  <div id="footer">Футер</div>
 </body>
</html>

Фиксированный макет с прижатым к низу футером и дополнительным дивом для второго фона body:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Макет в три колонки с контентом впереди</title>
  <style type="text/css">
   html, body {
    height: 100%; /* высота HTML и BODY */
    margin: 0; /* обнуление полей по краям страницы */
    padding: 0;
   }
 
   #body_wrapper {
    min-height: 100%; /* минимальная высота 100% для обертки */
    height: auto !important; /* для всех браузеров (можно убрать, если поддержка IE6 не нужна) */
    height: 100%; /* для IE6, т.к. он понимает height, как min-height */
    }
 
   #wrapper {
    min-height: 100%; /* минимальная высота 100% для обертки */
    height: auto !important; /* для всех браузеров (можно убрать, если поддержка IE6 не нужна) */
    height: 100%; /* для IE6, т.к. он понимает height, как min-height */
    width:960px;
    margin: 0 auto;
   }  
   body {
    color: #000; /* цвет текста страницы */
    background: #fff; /* фон */
    margin: 0; /* обнуление полей */
   }
   #header {
    height: 100px; /* высота шапки */
    background: #fc0; /* фон */
   }
   #cont_wrap {
    float: left; /* вспрытие обертки влево */
    width: 100%; /* ее ширина */
   }
   #content {
    height: 300px; /* высота контента */
    background: #eee; /* фон */
    margin: 0 200px 0 250px; /* боковые поля */
   }
   #menu {
    width: 250px; /* ширина меню */
    height: 300px; /* высота */
    background: #0fc; /* фон */
    float: left; /* всплытие влево */
    margin-left: -100%; /* левое отрицательное поле */
   }
   #sidebar {
    width: 200px; /* ширина сайдбара */
    height: 300px; /* высота */
    background: #c0f; /* фон */
    float: left; /* всплытие влево */
    margin-left: -200px; /* левое отрицательное поле */
   }
   #footer_correct {
    height: 100px; /* высота блока-корректора */
    clear: both; /* прерывание обтекания */
   }
   #footer {
    height: 100px; /* высота футера */
    color: #fff;
    background: #000;
    margin-top: -100px; /* верхнее отрицательное поле */
   }
  </style>
 </head>
 <body>
 
<div id="body_wrapper">
  <div id="wrapper">
  <div id="header">Шапка</div>
  <div id="cont_wrap">
   <div id="content">Контент</div>
  </div>
  <div id="menu">Меню</div>
  <div id="sidebar">Сайдбар</div>
     <div id="footer_correct"></div>
  </div>
</div>
  <div id="footer">Футер</div>
 </body>
</html>

Комментарии

Добавить комментарий