[SOLUCIONADO] Problema al aplicar css para igualar columnas

[fer86]

Hola buenas,

Solicito la ayuda de los gurús del foro ya que no encuentro la solución a un problema que me trae de cabeza.

Mi problema es el siguiente:

Estoy diseñando una web con cabecera, footer y en medio de ambos elementos, tres columnas.

Para igualar la altura de dichas columnas he utilizado el método de darles formato de tabla con css, es decir, un contenedor principal con la propiedad display:table, dentro del cual hay otro contenedor con la propiedad display: table-row, dentro del cual están las tres columnas, cada una de las cuales tiene la propiedad display: table-cell.

Hasta aquí todo perfecto, las tres columnas quedan igualadas en altura. El problema aparece cuando le aplico un padding-top o margin-top al primer elemento de cualquiera de las columnas laterales: el contenido de las demás columnas se me desplaza hacia abajo siguiendo exactamente dicho margin o padding (es decir, es como si se lo aplicara a todas).

¿Alguien sabe por qué puede suceder ésto?

[superweb360]

margin y padding no son aplicables cuando haces display:table. En su lugar usa border-spacing.

Código HTML:

<div class="table">
    <div class="row">
        <div class="cell">Cell 1</div>
        <div class="cell">Cell 2</div>
    </div>
</div>
 

Código CSS:

.table {
  display: table;
  border-collapse: separate;
  border-spacing: 10px;
}
 
.row { display:table-row; }
 
.cell {
  display:table-cell;
  padding:5px;
  background-color: gold;
}
 

[fede5426]

Podes usar inline-block en vez de table.. Con un vertical-align:top los alineas arriba, y el margen solo va a afectar a la columna que se lo indiques.

http://jsfiddle.net/r9wmj7wo/

Código HTML:

<div id=uno></div>
<div id=dos></div>
<div id=tres></div>
 

Código CSS:

div{
width:100px;
height:150px;
display:inline-block;
vertical-align:top;
}
 
#uno{
background:#f00;
margin-top:2em;
}
 
#dos{
background:#0f0;
}
 
#tres{
background:#00f;
}
 

Saludos

[fer86]

Gracias a los dos por las respuestas.

superweb360, lo que comentas de usar border-spacing, creo que no me sirve, ya que parece separar las columnas (o mas correctamente, celdas) el valor indicado, en este caso 10 px. Yo lo que quiero es hacer columnas iguales en altura sin definir expresamente dicha altura (es decir, que se adapten al contenido), pero que sea posible separar el contenido de cada una de las columnas de su borde superior, sin afectar a la posición del contenido del resto de columnas. Es decir, me gustaría hacer algo como ésto, pero de modo que el padding-top que aplico a #columna1, no afecte al contenido de #columna2:

https://jsfiddle.net/bed132h5/

[URL="https://jsfiddle.net/bed132h5/"]https://jsfiddle.net/bed132h5/[/URL]

fede5426, voy a investigar un poco ésto del inline-block y el vertical-align a ver si me sirve.

Muchas gracias a los dos.

PD:siento lo del enlace pero no se como ponerlo correctamente.

[fer86]

fede5426, esta interesante la propiedad inline-block, pero tampoco me sirve lo que propones, ya que necesito que las alturas de las columnas se igualen automáticamente (sin darles un tamaño mediante height), de ahí lo de darles formato de tabla.

¿Alguna otra solución?

[pzin]

El padding en principio puedes usarlo sin problemas. Pero tienes que alinear verticalmente el contenido de las celdas:

Código CSS:

.cell {
  vertical-align: middle;
}
 

O arriba:

Código CSS:

.cell {
  vertical-align: top;
}
 

El valor por defecto es baseline, por eso parece que afecta el relleno, pero no es así, es simplemente que crece y se alinea abajo.

[fer86]

Es justo lo que necesitaba pzin, asunto solucionado, muchas gracias.