Problemas con esquema de dos columnas

AleSanchez · #1 (**permalink**) 05/03/2005, 22:41

Hola a todos.
Tengo este simple esquema:

En donde tengo 2 problemas:

1- El menu tiene una imagen de fondo repetida en y (background-repeat: repeat-y;) El tema es que en general el contenido es mucho mas largo que el largo que ocupa el menu. ¿Como hago para que el largo del menu se "estire" hacia abajo hasta el largo del contenido? Lo mismo pasa con un color de fondo.

2- En IE, cuando el tamaño de la ventana del navegador es mas pequeña que el ancho de la pagina (760px) la caja del contenido se me "cae" debajo de la caja del menu. Como puedo solucionar esto?

Gracias. Saludos

PD: Asi lo tengo armado:

Diagrama

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
}
#menu {
	background-color: #00CCFF;
	width: 200px;
	float: left;
}
#contenido {
	width: 560px;
	background-color: #99FF99;
	margin-left: 210px;
}
</style>
</head>

<body>
<div id="menu">
  <p>Menu</p>
  <p>Menu</p>
  <p>Menu</p>
  <p>Menu</p>
  <p>Menu</p>
</div>
<div id="contenido">
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
  <p>Contenido</p>
</div>
</body>
</html>

Remo:Erdosain · #2 (**permalink**) 06/03/2005, 00:26

1) Creando una imagen de fondo que se repita a lo largo de un tercer DIV que contenga las dos columnas.
2) BUG del IE otra vez (seguramente).

Te subi un ejemplo para que lo veas funcionando. http://c.1asphost.com/quinientosonce...nas/index.html

El DIV#contenedor contiene a los otros dos y tambien determina el ancho del DIV de contenido. El que aparece al final llamado spacer es para que #contenedor se extienda hasta el final de los DIVs flotantes.

Nota para exquisitos: Mi explicación apesta y quizas el ejemplo también. Soy culpable.

AleSanchez · #3 (**permalink**) 06/03/2005, 13:44

Mil Gracias, es justo lo que no me salia.

Remo:Erdosain · #4 (**permalink**) 06/03/2005, 15:57

Al margen, te comento que cambié un poco tu CSS original (que funcionaba bastante bien) para evitar un par de bugs del IE

.

AleSanchez · #5 (**permalink**) 07/03/2005, 08:29

Perfectíiiiiiiismo!
Ahora inclusive ya no se "cae" la caja del contenido el IE.
Muchas Gracias!

ramm · #6 (**permalink**) 08/03/2005, 09:49

Tengo este mismo problema pero no me ha funcionado la solucion que diste, a mi la caja no se me cae, y he logrado mantener cada cosa en su sitio con varios navegadores, pero tengo el problema de que el div derecho no ocupa toda la altura del izquierdo y se ve un hueco muy feo debajo, ademas que Firefox lo pone del color del fondo de la pagina y no del color del fondo del div contenedor.

Ver aqui

Ya no se que hacer

Alguna idea??
Gracias

Remo:Erdosain · #7 (**permalink**) 08/03/2005, 12:34

Me parece que no hiciste lo que dije

La idea es esta: Primero tenes un DIV llamado "contenedor" que va a contener las dos columnas. Como este contenedor quedaría debajo de las dos columnas, le aplicas la primer imagen de fondo. Este imagen mide 600px de ancho por 1px de ancho. Los primeros 400px horizontales están pintados de blanco. Los 200px restantes de celeste. Al aplicarle este fondo repetido verticalmente al contenedor, se crea el efecto de dos columnas. Este contenedor debería extenderse verticalmente según la altura de los DIVS no flotados que contiene. Como el DIV izquierda está flotando y para colmo es el más largo, el DIV "contenedor" no se extiende hasta el final y el efecto de dos columnas termina antes. Solución: Agregar un DIV con un clear:both. Este DIV lo que hace es prohibir tener DIVs flotantes a sus costados. Y como además éste no está flotando, "contenedor" tiene que extenderse hasta abarcarlo (abarcando así "de casualidad" al DIV izquierdo flotante).
Sobre el efecto de degrade, es sencillo: Como los DIV izquierdo y derecho están puesto arriba del contenedor, los fondos de esos dos taparían al de "contenedor". Le pones al DIV derecho el degrade como fondo situado en el extremo superior y que no se repita. Entonces el DIV derecho tiene un fondo sólo en la parte de arriba pero todo el resto es transparente (dejando que se vea la parte celeste del fondo del contenedor).
Acá te dejo un ejemplo bien pelado de lo que dije arriba.
http://c.1asphost.com/quinientosonce...ade/index.html

ramm · #8 (**permalink**) 08/03/2005, 14:51

Tienes razon, ya lo tengo casi resuelto, solo hay un detalle.

Es ahora que el cuadro blanco del contenido no llega hasta abajo, sino que deja ese espacio azul de separacion entre él y el footer, al cual quiero ponerle otro color.

aqui

Remo:Erdosain · #9 (**permalink**) 08/03/2005, 16:54

No estas haciendo las cosas según lo que explique antes. Me doy cuenta que le metiste un fondo celeste al container y esperabas que el DIV de contenido fuera lo bastante largo. Fijate que pasa si el DIV de menu crece más que el de contenido. La solución infalible para esos casos es todo lo que dije antes.