Comportamiendo de celdas como divs

[xenon254]

Buenas

Tengo dos divs

Código:

.div_1{
	width: 150px;
	float:left;
	margin-right:15px;
	height:auto;
	/*display:table-row;*/
}

.div_2{
	width: 300px;
	height:auto;
	/*display:table-row;*/
}

Cuando el contenido de Div_1 es corto sucede esto:



Si habilito display:table-row en Firefox todo OK, se comportan como dos columnas de tabla normales, respetandose los tamaños verticales pero en Iexplorer KO...

Gracias de antemano por la ayuda,
un saludo

[kseso?]

Porque ie no controla ese valor de display.
No obstante, para que sea correcto ese valor (o table-cell), debe ir acompañado de "display:table" en su padre.

[xenon254]

Iniciado por kseso?

Porque ie no controla ese valor de display.
No obstante, para que sea correcto ese valor (o table-cell), debe ir acompañado de "display:table" en su padre.

Gracias por contestarme.

He realizado una prueba y si coloco en una capa que contenga a las dos el valor de display:table me las muestra una debajo de la otra, omitiendo el float:left de la primera. Y por supuesto en Iexplorer no funciona

Necesito algo alternativo que me las muestre correctamente, sin utilizar tablas.

Un saludo,

[Triby]

Los contenedores se muestran uno debajo de otro porque tienen table-row, es el comportamiento correcto para una linea (row). Como bien te dijo kseso?, utiliza el valor adecuado para celda: table-cell y elimina el float, porque el comportamiento normal de las celdas es estar una al lado de otra.

En www.araudi.net, Mikmoro tiene algunos ejemplos de lo que necesitas.

[txusweb]

Creo que lo que intentas es igualar la altura de los dos divs y que se vea bien en todos los navegadores, aquí tienes la solución

positioniseverything.net/articles/onetruelayout/equalheight

Un saludo.

[xenon254]

Buenas a todos

Gracias por vuestro interés, en especial a txusweb que me dio la pista. Al final con un simple overflow:hidden en col_2 se corrigió el problema.

Un saludo,