[SOLUCIONADO] Altura 100% en un div

[Davi91]

Buenas, estoy maquetando una web y llevo un rato chocandome con un problema entre Firefox y Chorme...

La historia es que tengo dos divs con texto dinámico, ambos contenidos en un wrapper, entonces quiero que ambos divs tengan la altura del más alto... Es decir, si el div de la izquierda tiene 400px de altura el de la derecha se ajuste a esa altura...

En Firefox funciona, pero en Chorme no... A ver si podéis echarme un cable...

Os dejo aquí el código;

http://codepen.io/anon/pen/sElud?editors=110

[pzin]

En realidad funciona en Chrome y en Firefox funciona, pero mal. Es decir, el comportamiento correcto es el de Chrome.

De todas formas puedes hacerlo así:

Código CSS:

.wrapper {
  display: table;
}
.floatLeft, .floatRight {
  display: table-cell;
}
 

Y te ahorras además el clearfix.

[Davi91]

Buenos días, ¿funciona mal en Chrome?

Yo en Firefox veo la altura de los dos divs igual, al 100% de su contenedor, que es el estilo que quiero aplicarle, mientras que en Chrome depende de su contenido.

He actualizado el pen con lo que me has propuesto, pero no funciona... ¿Alguna otra idea?

http://codepen.io/Davi91/pen/eCljr

[Davi91]

Más o menos hemos encontrado la solución, mi compañera a eliminado la propiedad "float: left;" y parece que se normaliza, al mostrarse ambos divs como una tabla realmente... Quizá no sea lo más adecuado, pero ahí está funcionando de momento...

http://codepen.io/Davi91/pen/eCljr

[pzin]

Iniciado por Davi91

Más o menos hemos encontrado la solución, mi compañera a eliminado la propiedad "float: left;"

Si es correcto. De hecho, más que solución era el problema. Cuando flotas un elemento, la propiedad display se computa con el valor block; entonces ya no se visualiza como si fuese una tabla.