Прилипающий к низу футер

Долгое время я использовал вот такой способ заставить подвал прилипнуть к низу страницы. Вот в чем суть этого метода.

Имеем следующий html-код:

<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">Content</div>
  <div id="footer">Footer</div>
</div>

Вот что записываем в css:

1. Элементам html и body задаём height: 100%;.
2. Элементу wrapper задаём min-height: 100%; position: relative;.
3. Элементу footer задаём position: absolute;. Из-за абсолютного позиционирования ширина блока автоматически изменилась на auto. Исправляем это с помощью width: 100%;. Позиционируем блок внизу родительского элемента — bottom: 0;. Задаём блоку фиксированную высоту.
4. Чтобы footer не налазил на содержимое блока content, добавляем блоку content нижний padding равный высоте блока footer.

Но сегодня я подсмотрел, на первый взгляд, более изящное решение. Вот готовый пример.

HTML-код:

<div id="wrapper">
  <div id="header">Header</div>
  <div id="content">Content</div>
</div>
<div id="footer">Footer</div>

Вот что записываем в css:

1. Как и в первом случае, элементам html и body задаём height: 100%;.
2. Элементу wrapper задаём min-height: 100%;, но на этот раз никак не позиционируем его.
3. Элементу footer задаём фиксированную высоту, а затем задаем ему отрицательный верхний margin равный высоте этого элемента.
4. Как и в предыдущем примере чтобы footer не налазил на содержимое блока content, добавляем блоку content нижний padding равный высоте блока footer.

Таким образом, мы избавились от лишнего позиционирования двух блоков. Оба способа кроссбраузерны.