Делаем футер сайта

Веб-Монстр
Этот и многие другие уроки вы можете найти на моей странице - knights2005.narod.ru. Добро пожаловать!

Футер (или подвал) предназначен для размещения копирайта, контактной и другой дополнительной информации. Как вам уже наверно понятно из названия, футер располагается внизу страницы.

Для создания футера мы используем параметр position: fixed, который фиксирует элемент в определенных координатах на странице. Естественно, что нам также будет нужен параметр bottom и left со значением 0 для прижатия подвала к низу документа. Таким образом минимальная запись будет выглядеть так:
...
<style type="text/css">
#footer { position: fixed; bottom: 0; left: 0; }
</style>
...
<div id="footer">
Copyright © Web-Monster 2011
</div>
...

Для наглядного представления сделаем такую заготовку веб-страницы:
<html>
<head>
<title>Футер сайта</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style type="text/css">
#footer { background: black; bottom: 0; color: #fff; left: 0; padding: 10px; position: fixed; text-align: right; }
#footer span { margin-right: 2%; }
</style>
</head>
<body>
<div>
Делаем футер сайта
</div>
<div id="footer">
<span>Copyright © Web-Monster 2011</span>
</div>
</body>
</html>

К сожалению, IE до 6-ой версии включительно не поддерживает параметр position: fixed. По этой причине многие разработчики идут на всяческие ухищрения для прижатия футера к низу документа, например путем добавления различных хаков или дополнительных слоев.

Стоит ли загромождать документ лишним кодом ради того чтобы корректно отобразить его в допотопном браузере, который максимум через год мы уже точно не увидим? По-моему, ответ очевиден.