[X] Помощник

[danilchuk88 Topic Starter]

При таком раскладе футер позиционируется относительно хедера, т.е. перекрывает сидбар и контент

HTML

Код

<div id="container">
<div id="header">Текст</div>
<div id="content">Текст</div>
<div id="sidebar">Текст</div>
<div id="footer">Текст</div>
</div>

CSS

Код

#container{position: relative;width:999px;margin:auto;padding:0}
   #sidebar, #content { position: absolute; }
   #header {height: 40px; }

   #sidebar {
    width: 150px;
    top: 82px;
    bottom: 0;
   }
   #content {
   width: 500px;
    top: 82px;
    left: 170px;
    bottom: 0; right: 0;
   }
   #footer {width:999px;height:40px;}

Как сделать чтоб футер позиционировался относительно контента?, т.е. отображался после контента, а не перекрывал его

[AtaELL]

А использования абсолютного позиционирования обязательное или Вам просто необходимо сделать такую разметку http://prntscr.com/45hxoo ?

[danilchuk88 Topic Starter]

Абсолютное позиционирование нужно чтоб контент был выше чем меню в коде, а отображался как обычно(меню слева, контент справа)

[andreykashops]

danilchuk88, нарисуйте схематично, как должно быть по примеру товарища AtaELL, я думаю вам нужно использовать position: relative;

[danilchuk88 Topic Starter]

На сайте так:

в коде это так: 1 хедр, 2 меню, 3 контент, 4 футер

По приведенному выше коду я добился того чтоб контент был выше в коде чем меню, т.е: 1 хедр, 2 контент, 3 меню, 4 футер. (отображение блоков на странице не меняется, это только в коде меню ниже контента). Проблема в том что футер позиционируется относительно хедера, и накладывается слоем на блоки "контент и меню". Нужно чтоб футер позиционировался относительно блока "контент"

[andreykashops]

Не до конца понял в чем проблема, но вроде вот так все нормально позиционируется:

Код

#container{
position: relative;
width:999px;
margin:auto;
padding:0;
}
#sidebar, #content{

}
#header{
height: 40px;
background: #F00;
}
#sidebar{
width: 150px;
float: left;
background: #00FF4F;
}
#content{
width: 849px;
float: right;
background: #662727;
}
#footer{
width: 999px;
height: 40px;
clear: both;
background: #04FF00;
}

UPD Забыл убрать position: absolute;

Сообщение отредактировал andreykashops - 23.7.2014, 17:12

[danilchuk88 Topic Starter]

UPD Забыл убрать position: absolute;

Работает! Спасибо, то что надо)

[sasha_design]

danilchuk88, Используйте Bootstrap - сам ленился его учить, но потом понял как я тупил) Там такие вещи делаются за 2 минуты)

[danilchuk88 Topic Starter]

Используйте Bootstrap

Немного погуглив, так и не понял , это движок? или его можно прикрутить к любому сайту?

[andreykashops]

о движок?

CSS фреймворк http://bootstrap-3.ru/

Сообщение отредактировал andreykashops - 25.7.2014, 19:02