SO equal height columns

by panchroma

HTML

<div class="header">
<h1>AGENDA ELETRÔNICA</h1>
</div> <!-- end header -->

<div class="container">
<div class="left">
<ul>
<ol><a class="menu" href="index.php">Home</a></ol>
<ol><a class="menu" href="cadastrar_pessoas.php">Cadastrar</a></ol>
<ol><a class="menu" href="buscar_pessoas.php">Buscar</a></ol>
<ol><a class="menu" href="gerenciamento.php">Alterar</a></ol>
</ul>
</div> <!-- end left -->

<div class="right">
FORM PHP
</div> <!-- end right -->
</div> <!-- end container -->

<div class="footer">
<small><a class="rodape" href="">Sobre</a></small>
<small> || </small>
<small><a class="rodape" href="">Contato</a></small>
<small> || </small>
<small><a class="rodape" href="">Ajuda</a></small>
</div> <!-- end footer -->

CSS

.container{
    overflow: hidden;   
}


.left{
/*border-style: dotted;
border-width: 1px;
border-color: black;*/
    
background-color: #CCC;
float: left;
width: 11%;
/*min-height: 500px;*/
margin: 2px 0px 2px 0px;
padding: 0px 0px 0px 0px;
/*height: 100%;*/
    
padding-bottom: 99999px;
margin-bottom: -99999px;

}

.right{
background-color:#999;
/* border-style: dotted; */
/* border-width: 1px;*/
/*border-color: black;*/

width: 88%;
float: right;
/*min-height: 500px; */
margin: 2px -2px 2px 8px;
    
padding-bottom: 99999px;
margin-bottom: -99999px;
}

.header, .footer{
text-align: center;
background-color: #777;
color: white;
border-style: dotted;
border-width: 1px;
border-color: black;
width: 100%;
}

.footer{
text-align: center;
line-height: 100%;
float: left;
height: 5%;
margin-bottom: 3px;
}