Rodapé sempre no rodapé com CSS

Uma coisa que sempre quebrei a cabeça...

"Como deixar o Rodapé sempre embaixo, mesmo quando conteúdo for menor?"

Tentei e tentei, achei algumas formas, mas sempre ficava algum erro, então 'googlei' um pouco, e thãramm.. Achei aqui a minha solução e que posto agora para vocês, que tem a mesma dúvida..

HTML

Montemos uma simples estrutura.. Onde tem a div geral que engloba todo o conteudo, menos a div do rodape, o porque vocês entenderam mais abaixo...

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

CSS

Agora no CSS, repare os comentários...

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
}

Bom, tá ai.. Espero que seja útil, Grande abraço e até a próxima!