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