Верстка дивами - «футер який завжди внизу»
Традиційно використовується таблична верстка, на ній дуже просто реалізувати все що потрібно - завжди робиться таблиця розмірами 100%x100% і в ній окремо відводяться осередки під шапку (header), середину (content) та низ (footer) сайту. Для створення меню ми використовуємо ще одну таблицю, для розташування контенту ще одну, і ще, і ще. Згодом це набридає. Кількість таблиць робить код важкочитаним і повільно вантажним (що більше елементів у DOM документа тим повільніше він рендер браузером), не кажучи вже про вагу сторінки. Пропонований спосіб я описую з урахуванням Doctype 4.01 Strict, ну або хоча б Transitional. Без доктайпу доведеться воювати з "quirks mode" різних браузерів.
Упевнена багато хто намагався верстати сторінку на дивах, а ще впевнена у багатьох були проблеми з позиціонуванням footer'а:
Наприклад знаючи приблизну висоту футера (у мене вона 32 пікселя), якщо ми вкажемо блоку #footer стиль, то footer виявиться знизу, але у разі великої кількості вмісту буде десь серед нього і скролюватиметься разом з ним.
Для того щоб цього не сталося непогано б створити блок, наприклад #all для взагалі всього що знаходиться на сторінці, з позиціонуванням relative, включаючи власне
Однак, якщо у нас на сторінці контенту мало, то футер тікає вгору, щоб цього не потрібно було домогтися розтягування #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, але розтягне блок як слід у всіх інших браузерах.
Результат ви можете побачити на сторінках цього блогу. Якщо видалити все непотрібне, то у мене вийшло ось таке рішення.