Ver Mensaje Individual
  #4 (permalink)  
Antiguo 19/06/2017, 11:17
Avatar de Rafael
Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.985
Antigüedad: 15 años, 6 meses
Puntos: 1812
Respuesta: 3 columnas, izquierda y derecha pegadas a 0 y la del centro justo en medio

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:
Ver original
  1. #centrado {display: -ms-flexbox;
  2.     display: flex;}
  3.  
  4. #content {
  5.     background: blue;    
  6.     width: 20%;}
  7.  
  8. #middle {
  9.     background: green;      
  10.     width:46%;}
  11.  
  12. #sidebar {
  13.     background:pink;    
  14.     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.

Última edición por Rafael; 20/06/2017 a las 10:31