SO equal height columns

HTML

<div class="header">
<h1>header</h1>
</div> <!-- end header -->

<div class="container">
<div class="left">
    <p>left</p>
</div> <!-- end left -->

<div class="right">
    <p>right</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel mi euismod lorem posuere tempor. Nulla tempus, metus vel euismod dictum, justo mauris tempor lacus, suscipit ullamcorper purus nunc quis dui. Maecenas vitae ligula sed magna pulvinar pellentesque. Nam varius libero nibh. Morbi quam ligula, tincidunt id auctor non, convallis at neque. Suspendisse pulvinar hendrerit vehicula. Praesent leo risus, suscipit ut imperdiet nec, dapibus eget massa. Etiam varius ipsum ac sem pretium in facilisis justo facilisis. Morbi ornare erat at urna tempor a euismod ipsum ornare. Pellentesque non augue lectus. Integer a ipsum leo, eget ornare enim. Mauris ornare elit ac ligula aliquet in fringilla dolor viverra. Donec fringilla pretium massa ut viverra.</p>
</div> <!-- end right -->
</div> <!-- end container -->

<div class="footer">
    <p>footer</p>
</div> <!-- end footer -->

CSS

.container{
    overflow: hidden;   
}


.left{
/*border-style: dotted;
border-width: 1px;
border-color: black;*/
    
background-color: #CCC;
float: left;
width: 11%;
/*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;
}