SO equal height columns

HTML

<div class="header">
    
<h1>header</h1>

</div>
<!-- end header -->
<div class="container">
    <div class="left">
        <p>left</p>s fsd ffds 
    </div>
    <!-- end left -->
    <div class="right">
        <p>right</p> <span>
        <a href="#p10">link to 10th paragraph</a>
    </span>

        <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis eget purus vitae aliquam. Proin laoreet tristique nisl, id adipiscing est. In hac habitasse platea dictumst. Duis venenatis ipsum in pretium dictum. Suspendisse malesuada massa non nibh ultrices ultrices. Proin venenatis orci non ullamcorper tristique. Vestibulum ac mi vulputate, viverra metus ullamcorper, placerat nisi. Donec molestie dui et cursus fermentum. Donec condimentum augue venenatis odio molestie luctus.</p>
        <p id="p2">Sed ac urna feugiat magna venenatis congue. Vivamus at cursus nisi, nec semper eros. Donec congue cursus ligula, vitae blandit sem faucibus in. Duis non felis eget nulla malesuada aliquet. Sed eu interdum mi, eget ultrices nibh. Aliquam vitae lacinia erat. Fusce felis odio, bibendum eu pretium vitae, fringilla scelerisque metus. Aenean nec dapibus ligula. Cras tincidunt tellus vel odio posuere, id cursus ligula rutrum.</p>
        <p id="p3">Praesent quis pharetra enim. Cras semper libero ut elit tempor mattis. Curabitur ut commodo nibh. Fusce eu malesuada turpis. Duis venenatis nunc sit amet nisl aliquet commodo. Fusce sagittis erat justo. Nam vehicula auctor enim tempor dapibus. Quisque egestas urna semper velit condimentum, vitae faucibus turpis malesuada. Proin adipiscing arcu nulla, id tincidunt lacus gravida vel. Suspendisse posuere lacus in nunc viverra, id luctus dolor adipiscing. Donec orci mi, egestas nec risus in, malesuada scelerisque lorem. Donec eu sem nec diam dictum porta. Donec justo nisl, lacinia ut odio id, blandit ultricies orci.</p>
        <p id="p4">Curabitur placerat purus vel elit vestibulum consequat. Lorem ipsum dolor...

CSS

.container {
   overflow: hidden;
    background-color: #ccc;
}
.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;
}