3 columnas, izquierda y derecha pegadas a 0 y la del centro justo en medio.

[Rafael]

El flexbox es sumamente fácil.

Básicamente le puse flexbox a tu contenedor y le quité el inline y el position absolute a los 3 elementos.

Mira que limpio y lindo queda.

Código CSS:

#centrado {display: -ms-flexbox;
    display: flex;}
  
#content {
    background: blue;     
    width: 20%;}
 
#middle {
    background: green;      
    width:46%;}
 
#sidebar {
    background:pink;    
    width: 20%;}
 

https://jsfiddle.net/1synrhgs/2/

Una versión más limpia: https://jsfiddle.net/1synrhgs/3/

No creo que haya razón ya para no usar flexbox. Es aceptado por todos los navegadores. https://caniuse.com/#feat=flexbox

La otra alternativa es usar float y poner un clear all al footer. Pero el position absolute no.

---

La alternativa al usar el inline-block es que tus porcentajes cierren correctamente 20%+60%+20= 100% y el medianil dejarlo con padding. El problema es que tienes que eliminar el espacio blanco entre las etiquetas del Html.