Rodapé

Bom dia povo...

Sei que tem muita coisa sobre esse assunto por ai, e que deveria ser uma coisa simples mas eu não consigo de jeito nenhum fazer o rodapé ficar no final da página, acompanhando qualquer tamanho de conteúdo.

Essa é a estrura das minhas páginas:

<!--Inicia o Site-->

<div id="container">
 <div id="cabecalho">
 <div id="menu"><?php include("menu.php");?></div>
 ...
 </div>

 <!--Inicia o Conteudo-->
 <div id="principal">
 ... páginas
 </div>

 <div id="rodape">
 ...
 </div><!--Termina Rodape-->

</div><!-- Termina o Site-->

E esse é o css com a tentaiva mais divulgada por ai (negrito), mais as propriedades que preciso pro meu site.:

<style type="text/css">
html, body {

 font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin: 0px 0px 0px 0px;
 [b]height: 100%; [/b]

}
#container{
 text-align: left;
 margin: auto;
 background-color: #FEFAEB;
 [b]min-height: 100%;
 position: relative;[/b]
}

#cabecalho{
background-color: #A2B5CD;
color: #036;
font-size:22pt;
padding: 0px 0px 0px 0px;
font-family: Verdana;
}

#menu{
 background-color: #FEFAEB;
 color: #036;
 font-size:9pt;
 font-family: Verdana;
 margin-right: 0px;
}

#principal{
 margin-left: 20px;
 margin-right: 20px;
 padding-right: 0px;
 padding-left: 0px;
 padding-top: 0px;
 [b]padding-bottom: 30px;[/b]
 font-family: Verdana;
 font-size: 8pt;
 color: #036;
 background-color: #FEFAEB;
}

#rodape{
[b] position: absolute;
 bottom:0;[/b] background-color: #A2B5CD ;/*#FEFAEB; */
 text-align:right;
 font-family: Verdana;
 font-size: 8pt;
 color: #036;

 [b]width:100%;
 height:30px;
 clear: both; [/b]
 margin-right:20px;
 margin-top:20px;
 padding-top:10px

}
</style>

Desse jeito o rodapé fica por cima do conteúdo que ultrapassa o tamanho da tela.

Sem as propriedades em negrito, quando o conteúdo é pouco o rodapé termina logo abaixo, no meio da página... quando é muito fica certo.

Alguma dica?

Obrigada!