Barra lateral estática y contenido fluido con encabezado y pie de página

Hola, he tenido problemas para codificar mi diseño. Quiero que mi barra lateral permanezca igual independientemente del tamaño de la pantalla, pero también necesito que mi área de contenido sea fluida. El encabezado permanece en la parte superior, que es lo que quiero, el problema es el pie de página, necesito que permanezca siempre en la parte inferior y en todo el ancho del área de contenido. Si alguien puede ayudar, sería muy apreciado.

Aquí está mi código.

html, body { 
    height: 100%; 
    margin: 0;
}   

#content { 
    width: 100%; 
    height: 100%;
}   

#left { 
    width: 20%; 
    height: 100%; 
    float: left; 
    background-color: red; 
}   

#right { 
    float: left; 
    width: 80%; 
    height: 100%;  
    background-color: green;
} 

#right header { 
    background: blue;
    text-align: center;
    color: white;
    padding: 20px;
}

#right footer {
    background: brown;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    width: 80%;
}

<div id='content'>   
    <div id='left'>Testing</div>   
    <div id='right'>
        <header>TITLE</header>
        <div class="content">
            <p>lorem ipsum and the like.</p>
        </div>	
        <footer>FOOTER</footer>
    </div>
</div>