Foros del Web » Creando para Internet » CSS »

Dos columnas y contenidos variables

Estas en el tema de Dos columnas y contenidos variables en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/11/2004, 12:12
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Dos columnas y contenidos variables

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
  #2 (permalink)  
Antiguo 29/11/2004, 12:43
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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.
  #3 (permalink)  
Antiguo 29/11/2004, 12:53
Ex Colaborador
 
Fecha de Ingreso: junio-2002
Mensajes: 9.091
Antigüedad: 15 años, 5 meses
Puntos: 16
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.
__________________
Josemi

Aprendiz de mucho, maestro de poco.
  #4 (permalink)  
Antiguo 29/11/2004, 13:08
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
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
  #5 (permalink)  
Antiguo 29/11/2004, 13:12
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Aah! Rectifico, agregando el contenedor con el clear both dentro del contendor padre furula correcto

Gracias josemi!
  #6 (permalink)  
Antiguo 29/12/2004, 10:49
 
Fecha de Ingreso: noviembre-2003
Mensajes: 383
Antigüedad: 14 años
Puntos: 2
¿Pero que es lo hace y como actua el Clear: both?
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:16.