Rodapé sempre no rodapé

Neste exemplo vamos criar uma página com o rodapé fixo.

Para ver o exemplo funcionando clique aqui.

HTML:

‹div id="geral"›
	‹div id="topo"›TOPO‹/div›
	‹div id="conteudo"›CONTEÚDO‹/div›
‹/div›
‹div id="rodape">Rodapé‹/div›

CSS:

html, body, #geral { height: 100%; }

body > #geral { height: auto; min-height: 100%; }

#conteudo { padding-bottom: 40px; } /* O padding, deve ser o mesmo valor da altura do rodapé */

#rodape {
   position: relative;
   margin-top: -40px; /* Este margin, tem que ser o mesmo valor da altura do rodapé, só que negativo */
   height: 40px; /* E aqui, fica a altura do rodapé */
   clear: both;
}