Colocar Rodapé fixo no fim da página

Esse é um problema clássico que todos nós desenvolvedores já passamos. Aprenda a criar um rodapé fixo no final do navegador. É uma solução que funciona bem em todos os navegadores.

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 class="tudo">  
   <div class="topo"></div>  
   <div class="conteudo"></div>  
   <div class="rodape"></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;  
 }  

Funciona em praticamente todos os browsers (menos em IE 6).