Dos columnas y contenidos variables

[tunait]

Buenas,

Esto me toca mucho la moral y quiero creer que es culpa de mi ignorancia y que existe una fórmula con css sin necesidad de tener que recurir a parchear con javascript.

Planteamiento:

Diseño a dos columnas mediante dos contenedores (div) dentro de otro contenedor.

<div id="padre">
<div id="columnaDerecha"> más contenidos</div>
<div id="columnaIzquierda">contenidos</div>
</div>

De qué forma, sin aplicar height ni min-height, puedo lograr que el contendor padre no quede desbordado por alguna de las columnas (la altura viene dada por los contenidos)

Si una de las columnas tiene posicionamiento absoluto y el contenido de ésta es mayor que el contenido de la otra columna, sobresale por encima del borde inferior del contendor principal.

La forma concreta que estoy usando es dos columnas con posicionamiento relativo y una de ellas lleva un float: right. Si la columna de la izquierda es más alta que la columna de la derecha el contendor principal se adapta, pero si la columna de la derecha es más alta que la de la izquierda el contendor principal mantiene la misma altura que la columna izquierda y la de la derecha desborda por fuera al contenedor principal.

El css es el siguiente

Código:

#contenedorPadre{
	width: 90%;
	position: relative;
	border: 1px solid #6699FF;
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
	padding: 10px;
	background-color: #ffffff;
	color: #000000;
}
#columnaIzquierda{
	width: 475px;
	border-right: 1px dashed #999999;
	padding-right: 8px;
	
}
#columnaDerecha{
	padding-top: 30px;
	width: 200px;
	position: relative;
	float: right;
	margin-left: 2px;
	bottom: 0;
	text-align: center;
	font-size: 10px;

}

No me sirve aplicar height ni min-height pues la cantidad de contenidos a insertar en cada columna sale de una base de datos y por lo tanto, es diferente cada vez que se carga el documento.

Gracias y saludos

[tunait]

Como vale más una imagen que mil palabras paso a ilustrar el problemo



Aquí los contenidos de la columna izquierda dan una altura mayor a esta columna que a la de la derecha(donde la foto). El contenedor padre se adapta a la altura de la columna de la izquierda y el pie de página queda correctamente debajo



Aquí los contenidos de la columna derecha (fotos) dan una altura mayor a esta columna que a la de la izquierda (texto). El contendor padre no se adapta y la columna de las imágenes pasa por encima del borde inferior del contendor padre y desplaza el pie de página hacia la izquierda.

[josemi]

Hola,

Prueba creando un div con clear: both al final del div padre:

<div id="padre">
<div id="columnaDerecha"> más contenidos</div>
<div id="columnaIzquierda">contenidos</div>
<div style="clear:both">&nbsp;</div>
</div>

No se si con posicionamiento relativo funciona.

Saludos.

PD: Y tampoco te fies mucho de mi, estoy empezando con esto de estilo.

[tunait]

Bueno, algo hemos ganado. Le apliqué un clear:both al contendor del pie de página y al menos ahora no es desplazado por la columna de la derecha.

Sin embargo, continúa el desbordamiento por encima del contendor padre



Gracias josemi, algo hemos adelantado

[tunait]

Aah! Rectifico, agregando el contenedor con el clear both dentro del contendor padre furula correcto

Gracias josemi!

[pellagofio]

¿Pero que es lo hace y como actua el Clear: both?