Criando um rodapé sempre embaixo do site

Esse é um problema clássico que todos nós desenvolvedores já passamos. Já cruzei com mil soluções para o problema, porém esse final de semana precisei de algo e nas minhas pesquisas encontrei uma solução que funcionou perfeitamente, melhor do que quaquer uma que já tenha usado.

O Problema

Como vemos na imagem acima, o rodapé do site seguindo uma estrutura normal de HTML ficaria logo após a div do conteúdo.

A solução

Como vemos na imagem acima, esse é o resultado final que queremos.

O código HTML

   </div>
   </div>
   </div>
</div>

O código CSS

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
.tudo {
   min-height:100%;
   position:relative;
}
.topo {
   background:#ff0;
   padding:10px;
}
.conteudo {
   padding:10px;
   padding-bottom:60px;   /* Mesma Altura do Rodapé */
}
.rodape {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Mesma Altura do Rodapé */
   background:#6cf;
}

Por que essa é a melhor solução?

• Funciona em praticamente todos os browsers (menos em IE 6, existe solução mas não vou nem postar Wink)
• CSS 100% válido e sem Hacks
• Sem javascript

Resultado: (ver em tela cheia)