tengo un problema para posicionar divs

[freeware]

Hola, estoy tratando de maquetar una pagina en css tal como lo hiciera con tablas, hasta ahora todo bien, pero tengo un pequeño problema que para explicarlo mejor pondre unas imagenes (que hice con paint).

Bueno en esta primera imagen explico lo que quiero hacer, he hecho una div contenedor en la que anidare varias divs, pero no le pongo height a la div, porque necesito utilizar datos dinamicos, y el tamaño total puede ser variable.

img409.imageshack.us/img409/7389/ejemplo1cg3.jpg

En esta segunda imagen muestro lo que pasa con firefox al no ponerle un height determinado (IE si hace bien lo que necesito)

img226.imageshack.us/img226/6923/ejemplo2ro5.gif

He probado poner tambien el height en auto, pero pasa lo mismo. En si queda bien cuando le pongo altura a la div contenedor, pero definitvamente eso no me sirve, (con tablas es mas fácil) ¿como puedo arreglar esto?

[PatomaS]

Hola

Lo mejor será que nos pongas el código de la página con su css. Mejor aun si nos puedes dar una dirección para verla.

Felicidad

[Mikmoro]

Prueba a incluir esto donde termina tu div principal, justo antes de cerrar el div:

<div style="clear: both;"></div>

O bien, puedes añadir a tu css un

.limpiar {
clear: both;
}

y en el mismo sitio que te he dicho, añadir:

<div class="limpiar"></div>

Y creo que con esto, tu div principal crecerá al tamaño de su contenido.

Mikel.

[freeware]

Infinitas gracias Mikmoro se soluciono perfecto, tambien te pido si me podrías explicar ¿porque hay que poner esa div?, solo necesito una explicacion a muy grandes rasgos porque si sé css.

Gracias.

[Mikmoro]

No sé si sabré explicarme bien.
Ese div, o más bien el parámetro "clear", le fuerza a empezar una nueva línea en el flujo vertical, porque le dice que no permita que el bloque anterior sea rodeado por otros elementos como texto u otras cajas, sino que se situen en la siguiente línea vertical. Esto hace que la caja ocupe un espacio real físico en la línea vertical, y por tanto que el contenedor principal se agrande al menos para contener ambas líneas.

No sé si así te quedará muy claro. Igual puedes encontrar una explicación más clara en algún manual. Comprueba lo referente al flujo del documento y la propiedad float.

Me alegro de que el ejemplo anterior te haya servido en tu diseño. Saludos.

Mikel.

[AlZuwaga]

La explicación (o la que yo puedo dar con mis palabras) es que al estar "flotados" los divs internos, estos quedan fuera del flujo normal del documento. Al estar "fuera de flujo", el div contenedor no se da cuenta que están allí y éste termina donde termine su propio contenido u otro contenido con la propiedad clear establecida.

IE si hace bien lo que necesito

El comportamiento normal es el que te muestra Firefox. El de IE es erróneo :)

[Tigervlc]

Yo creo que por eso es habitual el uso de pies de página que incluyan en su estilo el atributo "clear:both":

#pie {
...
clear:both;
...
}

si no me equivoco, de esta manera se consigue que el contenedor llegue hasta abajo, no?

[freeware]

Muchas gracias a ambos, ya me ha quedado claro