Футер всегда внизу

Все очень просто… итак… приступим.

Созадем главный блок (class=”wrapper”) и внутрь его помещаем еще два блока с контентом (class=”main”) и футером (class=”footer”).

<div class="wrapper">
<div class="main">

</div>
<div class="footer">

</div>
</div>

Теперь рассмотрим CSS

html, body {
margin:0; /*убираем отступы у документа, внешние…*/
padding:0; /*…и внутренние*/
height:100%; /*устанавливаем документу высоту в 100%*/
} .wrapper{
width:100%; /*устанавливаем ширину главного блока…*/
min-height:100%; /*…и минимальную высоту (для Opera и FireFox)*/
position:relative; /*позиционируем блок относительно*/
} .main{
padding: 0 0 85px 0; /*устанавливаем отступ снизу для контента, чтобы блоки при заполнении не наезжали друг на друга*/
} .footer {
position:absolute; /*позиционируем блок абсолютно…*/
bottom:0; /*…снизу*/
width: 100%; /*устанавливаем ширину футера*/
height:85px; /*устанавливаем высоту футера*/
}

Вот и все… Ага… чуть не забыл… хак для родного IE…
Внутри тега head прописываем строчку

<!–[if lt IE 7]><style media=”screen” type=”text/css”>.main {height:100%;}</style><![endif]–>

Теперь точно все.