Problema con las tablas, divs que ocupan lugar.

JSGarcia91 · #1 (**permalink**) 26/01/2013, 10:46

Hola, buenas tarde os explico mi problema, necesito dos cajas de alto variable (el ato viene dado según el contenido), para realizar esto he elegido un solución propuesta por el diseñador Roger Johansson que viene a ser simplemente crear una tabla con cajas y mediente css a esas cajas darle un display del tipo table, row y cell, bueno lo he conseguido sin ningún problema, lo que pasa es que necesito que dentro de cada celda hayan más cajas y cuando lo hago las demás "celdas" bajan su contenido dejando espacio sin contenido.

Pongo unas capturas para explicarme mejor, aquí el código y la imagen de las cajas del mismo tamaño sin más cajas dentro.

Código:

<html>
	<head>
		<title>Ejemplo: Elementos con la misma altura</title>
		<style type="text/css">
			#contenedor {
				display: table; <!-- Indicamos que el contenedor se comportará como una tabla. -->
				background: blue;
				margin: 0 auto;
			}
 
			#contenidos {
				display: table-row; <!-- indicamos que el contenedor se comportará como una fila -->
			}
 
			#columna1, #columna2, #columna3 {
				padding: 10px;
				background-color: green;
				display: table-cell; <!-- Indicamos que cada contenedor se comportará como una celda de la fila. -->
			}
			
			#columna2 {
				background: pink;
			}
			
			#columna2 div {
				width: 200px;
				float: left;
			}
		</style>
	</head>
	
	<body>
		<div id="contenedor">
			<div id="contenidos">
				<div id="columna1"><p>Columna 1</p><p>Columna 1</p><p>Columna 1</p><p>Columna 1</p></div>
				<div id="columna2"><p>Columna 2</p></div>
				<div id="columna3"><p>Columna 3</p></div>
			</div>
		</div>
	</body>
</html>

El problema es cuando, por ejemplo en la columna dos meto un div:

Código:

<div id="columna2"><div><p>Columna 2</p></div></div>

Como se puede ver en la imagenes ese div ocupa espacio en las demás celdas y baja todo el cntenido dejando espacio en banco.

¿Como puede hacer que no deje ese espacio cuando inserto una caja?

Muchas gracias