A vueltas con los DIVs

-nazgul- #1 Feb '07

Veréis hace poco me decidí a maquetar mis webs con DIVsy me encontré con un problema que al hacerlo con tablas no tenía.

Tengo dos divs adyacentes, de altura variable y ambos con imagen de fondo, dentro de otro div contenedor. El problema es que el div derecho se me queda corto, es decir, no llega a cubrir toda la altura que cubre el izquierdo, quedando la imagen de fondo "cortada".

He buscado soluciones y no he encontrado nada que se pueda aplicar a este caso. El código relevante es:

div#principal {
margin: 10px auto;
width: 800px;
}

div#cuerpo {
float: left;
width: 637px;
background-image: url('images/cuerpo.png');
}

div#cuerpo2 {
margin-left: 638px;
background-image: url('images/cuerpo2.png');
}

Por supuesto hay otros divs y elementos pero no vienen al caso.

Gracias de antemano.

SeiYa #2 Feb '07

Prueba asignándole un height; o un min-height; o haciéndoles contenerse uno dentro de otro (con padding para que respete el fondo), no se, sube la url a algún sitio para verlo mejor.

guner #3 Feb '07

El mayor problema que le veo a los divs es que cuando están flotando no hacen crecer a su contenedor ni ocupar el 100% de su altura.

Habría que ver el problema concreto para escoger la mejor solución.

No he mirado el código; una buena solución suele ser usar dos divs contenedores y ponerle a cada uno un background, pero así la semántica en el XHTML se va a freír pimientos de manicomio guatemalteco.

-nazgul- #4 Feb '07

Mirando por ahí he encontrado una solución un poco chapucera. Se trata de usar un div contenedor con un background y dejar un margen en uno de los divs contenidos de igual anchura que ese background.

div#contenedor {
background-image: url(blah.gif);
background-position: right;
}

div#izquierda {
background-image: url(bloooh.gif);
margin-right: 200px;
}

div#derecha {
float: right;
width: 200px;
}

C

CH1W4K4 #5 Feb '07

Supongo que también te valdria poner otra capa abajo del todo en plan footer y así aprovechar para poner el nombre de la web y todas esas paranoias que se suelen poner

-nazgul- #6 Feb '07

#5 No, si eso ya lo tengo, pero he omitido el resto del código porque no tiene relación con la pregunta.

Usuarios habituales