Hola, este es mi primer diseño utilizando este mecanismo la estructura resumiendo es lo siguiente:
xhtml
Código HTML:
<body>
<div id="contenedor">
<div id="contenidos">
<div id="columna_1">
contenido de la columna 1
</div>
<div id="principal">
contenido central de la pagina
</div>
<div id="columna_2">
contenido de la columna 2
</div>
Código CSS:
Ver originalbody {margin:0;
padding:0;
}
#contenedor {display: table;
width: 100%;
}
#contenidos {display: table-row; }
#columna_1, #principal, #columna_3 {display: table-cell; }
#principal {width: 66%;
padding: 100px 45px; }
#columna_1, #columna_2 {width: 17%;
padding: 23px 20px}
Lo que yo quiero es que la columna central tenga un padding-top mayor que el de las otras dos columnas y lo que hice fue agregar por separado los paddding correspondientes, pero no respeta la diferencia y agrega a todas la medida mayor en este caso a la de la columna central. Intente agregando otro div a cada columna y extender el selector a un selector descendiente, pero de todos modos no respeta el padding que le indico. Recién se me ocurre mientras escribo esto que a la columna centra podría poner white-space: pre-wrap y agregar al html unos saltos de linea o sino hacer un div y en columna central y ponerle esta propiedad y así no todo el contenido de central heredaría lo de " white-space: pre-wrap" aún no lo probé a esto, pero creo que si funcionará. De todos modos existe una forma de que las columnas sean independientes y pueda personalizar el relleno de cada una. Saludos.