Вёрстка дивами - «футер который всегда внизу».

Традиционно используется табличная вёрстка, на ней весьма просто реализовать всё что нужно - всегда делается таблица размерами 100%x100% и в ней отдельно отводятся ячейки под шапку (header), середину (content) и низ (footer) сайта. Потом чтобы сделать расстановку меню мы используем ещё одну таблицу, для расположения контента ещё одну, и ещё, и ещё... Со временем это надоедает. Количество таблиц делает код трудночитаемым и медленно грузимым (чем больше элементов в DOM документа тем медленней он рендерится браузером), не говоря уже про вес страницы. Предлагаемое ниже способ я описываю с учётом Doctype 4.01 Strict, ну или хотя бы Transitional. Без доктайпа придётся воевать с "quirks mode" разных браузеров.

Уверена многие пытались верстать страницу на дивах, а ещё уверена у многих были проблемы с позиционированием footer'а:

Например зная примерную высоту футера (у меня она 32 пикселя), если мы укажем блоку #footer стиль {position:absolute; bottom:0;height: 32px;}, то footer окажется снизу, но в случае большого количества содержимого будет находиться где-то среди него и скроллироваться вместе с ним.

Для того чтобы этого не случилось неплохо бы создать блок например #all для вообще всего что находится на странице, с позиционированием relative, включая собственно <div id="footer"></div>. Теперь позиционирование футера считается относительно родительского блока, а не экрана, и теперь футер прижат к низу блока #all. Поскольку низ у #all там, насколько хватило контента, #footer перекрывает его часть. Чтобы этого не произошло добавим перед ним блок <div id="empty">&nbsp;</div> с высотой 32px. 

Однако, если у нас на странице контента мало, то футер убегает вверх, чтобы этого не было нужно добиться растягивания #all на всю высоту экрана минимум. Сам блок #all сделаем height:100% и добавим стиль html, body { height: 100%; margin: 0; padding: 0; } и ура, у нас всё казалось бы замечательно. #all - растягивается всю облась экрана. А вот с контентом оказывается облом - при кучке контента #all занимает только отображаемую часть, #footer как следствие тоже. Во всех браузерах кроме IE6. В итоге у нас получилось то что в начале. Ситуацию поправит html>body #all { height: auto; min-height: 100%; } - который не затронет IE6, но растянет блок как надо во всех остальных браузерах.

Результат вы можете видеть на страницах этого блога. Если удалить всё ненужное то у меня получилось вот такое решение.

P.S. Тоже самое можно сделать другим способом.