Footer внизу страницы

Памятка верстальщику    Веб-гуру    html, css    Footer внизу страницы

Добовольно-таки наболевшая тема - как прижать подвал сайта, футер, footer, к низу страницы? И чтобы он всегда оставался там? И чтобы когда текста на странице становится много - опускался вниз?

Сразу посмотреть пример можно тут

Весьма заманчивой идеей было бы просто написать скрипт, и пусть он за счет увеличения высоты главного блока всегда держит футер снизу. Но! Во первых, страница будет загружаться дольше, во вторых, сама реализация подразумевает временное скрытие всех блоков, дабы не раздражать посетителя резким скачком footer'a вниз. И в третих - часто на форумах, других сайтах, посвященные верстке и обучению html, css и программированию на JavaScript - пугают тем, что пользователь может отключить джаву скрипт. Хотя мне лично такие пользователи еще не попадались, но в своих работах это страраюсь учитывать.


Код html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>Footer внизу страницы</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="page">
			<div id="header">
			</div><!-- /header -->
		
			Очень много всякого разного текста, специально для примера... Интересно, поисковик этот бред проиндексирует?
		
			<div id="footer_cleaner"></div>
		</div><!-- /page -->
		<div id="footer"></div>
	</body>
</html>


Код CSS 
* html #page {
	height: 100%;
}
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
 
body{
	background: #fff;
	color: #36393D;
	font-family: "Trebuchet MS";
	font-size: 18px;
	line-height: 22px;
}
  
#page {
	min-height: 100%;
	margin: 0 0 -80px 0;
	background: green;
}
 
#header {
	height: 120px;
	background: blue;
}
 
#footer_cleaner {
	height: 80px;
	clear: both;
}
 
#footer {
	height: 80px;
	background: red;
}