Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema al aplicar css para igualar columnas

Estas en el tema de Problema al aplicar css para igualar columnas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 13/04/2015, 19:41
 
Fecha de Ingreso: julio-2013
Mensajes: 26
Antigüedad: 11 años
Puntos: 2
Problema al aplicar css para igualar columnas

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?
  #2 (permalink)  
Antiguo 13/04/2015, 22:42
(Desactivado)
 
Fecha de Ingreso: abril-2015
Ubicación: España
Mensajes: 616
Antigüedad: 9 años, 3 meses
Puntos: 74
Respuesta: Problema al aplicar css para igualar columnas

margin y padding no son aplicables cuando haces display:table. En su lugar usa border-spacing.
Código HTML:
Ver original
  1. <div class="table">
  2.     <div class="row">
  3.         <div class="cell">Cell 1</div>
  4.         <div class="cell">Cell 2</div>
  5.     </div>
  6. </div>

Código CSS:
Ver original
  1. .table {
  2.   display: table;
  3.   border-collapse: separate;
  4.   border-spacing: 10px;
  5. }
  6.  
  7. .row { display:table-row; }
  8.  
  9. .cell {
  10.   display:table-cell;
  11.   padding:5px;
  12.   background-color: gold;
  13. }
  #3 (permalink)  
Antiguo 13/04/2015, 23:32
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 7 meses
Puntos: 208
Respuesta: Problema al aplicar css para igualar columnas

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:
Ver original
  1. <div id=uno></div>
  2. <div id=dos></div>
  3. <div id=tres></div>

Código CSS:
Ver original
  1. div{
  2. width:100px;
  3. height:150px;
  4. display:inline-block;
  5. vertical-align:top;
  6. }
  7.  
  8. #uno{
  9. background:#f00;
  10. margin-top:2em;
  11. }
  12.  
  13. #dos{
  14. background:#0f0;
  15. }
  16.  
  17. #tres{
  18. background:#00f;
  19. }

Saludos
  #4 (permalink)  
Antiguo 14/04/2015, 16:13
 
Fecha de Ingreso: julio-2013
Mensajes: 26
Antigüedad: 11 años
Puntos: 2
Respuesta: Problema al aplicar css para igualar columnas

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.

Última edición por fer86; 14/04/2015 a las 16:17 Razón: Novato
  #5 (permalink)  
Antiguo 14/04/2015, 17:14
 
Fecha de Ingreso: julio-2013
Mensajes: 26
Antigüedad: 11 años
Puntos: 2
Respuesta: Problema al aplicar css para igualar columnas

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?
  #6 (permalink)  
Antiguo 14/04/2015, 22:49
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años
Puntos: 2114
Respuesta: Problema al aplicar css para igualar columnas

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

Código CSS:
Ver original
  1. .cell {
  2.   vertical-align: middle;
  3. }

O arriba:
Código CSS:
Ver original
  1. .cell {
  2.   vertical-align: top;
  3. }

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.
__________________
(:
  #7 (permalink)  
Antiguo 15/04/2015, 15:01
 
Fecha de Ingreso: julio-2013
Mensajes: 26
Antigüedad: 11 años
Puntos: 2
Respuesta: Problema al aplicar css para igualar columnas

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

Etiquetas: columnas, igualar, todo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:49.