Columnas siempre del mismo tamaño

[Joaquin2111]

Iniciado por WinderJerter

hola que tal, eso lo puedes lograr fácilmente con las propiedades: display:table, table-row y table-cell, mira aquí te pongo un ejemplo que acabo de hacer a la rápida, pero tu lo puedes mejorar para que se ajuste a tus necesidades.

Código CSS:

#contenedor {
    background-color:#CCC;
    display:table;
    padding:1px;
}
 
#contenidos {
    display:table-row;
}
 
#columna1, #columna2, #columna3 {
    display:table-cell;
    padding:10px;
}
 
#columna1 {
    background-color:#060;
}
 
#columna2 {
    background-color:#FFF;
}
 
#columna3 {
    background-color:#F00;
}
 

Código HTML:

<div id="contenedor">
  <div id="contenidos">
    <div id="columna1">columna 1.1<br> columna 1.2<br> columna 1.3<br></div>
    <div id="columna2">columna 2</div>
    <div id="columna3">columna 3</div>
  </div>
</div> 

Y aquí la imagen del resultado:



Saludos y espero que te sirva de maravilla

Probado y compatible en: FF, IE8, Safari, Chrome y Opera.

Pues yo lo he probado con Windows 7 i IE 8.0.7600 y no me funciona. Con firefox y Chrome sin problemas. Pero una solución que no sirve para todos los navegadores no es una buena opción, y menos si no funciona en el principal navegador. (no entraré en guerras de navegadores, yo no uso IE, pero la mayoría de gente si).