Caja que no crece

[falonpla]

Hola, fijaros en esta página:

http://deltoya.com/prueba1.html

He colocado dos div dentro de otro, cada uno flotado a un lado, y mi intención es que el div "container" crezca tanto como el mayor de los div que contiene, en este caso el rojo de la izquierda. En internet explorer crece, pero en Firefox no.

Que propiedades css tengo que añadir para que el div crezca con los que tiene contenidos? Thank's.

[JHMorales]

Hola:
el div container si crece, prueba a ponerle un borde y lo verás. Lo que no crece es el fondo que le has puesto a cada div interno, eso se soluciona con el método de las faux columns:
http://alistapart.com/articles/fauxcolumns/
prueba a ver que te sale.
Suerte, Jorge H.

[tuky]

Creo que se soluciona agregando la propiedad overflow: auto; a tu div "container".
Saludos,
Tuky

[falonpla]

Gracias tuky, pensaba que la propiedad overflow era solo para el tema del scroll.

A Jorge, creo que no entendiste mi pregunta, ya que si abres la pagina con Firefox u Opera verás que el div no crece, le puse un color de fondo verde para comprobarlo. Pero de todos modos gracias por contestar. Salu2.

[niroblock]

hola

el FLOAT quita la erencia de una capa madre

dejando la capa hija libre de dimensionarse segun el tamaño de su propio

contenido o mediande una pre-impostacion de las dimenciones

si quieres que la capa sea dinamica deberas de quitar el float.

e posicionar la capas con RELATIVE

endoce el orden de estas dara con la posición

espero te sirva.

ciao.

[falonpla]

Hola niroblock, me interesa bastante lo que dices, ya que estoy haciendo una página y estoy usando mucho la propiedad float para los divs, pero no acabo de comprender cual es el inconveniente de usar los floats. Añadiendo la propiedad overflow como me indicó tuky ya consigo que las capa contenedora se redimensione. Cual sería la ventaja de posicionar las capas con relative????

[JHMorales]

Hola:
la respuesta a tu problema ha aparecido en otro post con el mismo problema, seta vez usando foto y texto pero para el caso es igual. Pónle a tu
.container
overflow:hidden;

Suerte, Jorge H.

[falonpla]

Hola de nuevo Jorge, el problema de que se redimensionara la capa container ya lo tenía solucionado como me indicó tuky. Lo que quiero saber es por que es mejor posicionar capas con relative en lugar de hacerlo con floats. Gracias.

[JHMorales]

Hola:
son dos cosas distintas, absolute hace referencia a la posición de un elemento dentro de la web tomándo como referencia la esquina superior izquierda de la pantalla. En cambio relative hace referencia al punto donde debería aparecer el elemento en la página.

El flujo html es como una lista consecutiva presentando los elementos uno después de otro, no al lado de otro. Lo que consigue el float es hacer que un elemento se situe en una posición y permita el flujo html al lado opuesto al que hace referencia, o no lo permita según el valor que se le ponga.

El relative al permitir el posicionar un elemento en relación al lugar en donde debería aparecer consigue que, si se cambia el tamaño del texto y los divs crecen, los elementos que están en relative se desplazan apropiadamente.

Suerte, Jorge H.

[niroblock]

Hola,

siento llegar tarde

efectivamente es muy corecta la respuesta de JHMorales.

cada persona dibuja la web como quiere ,

tengo amigos que prefieren que todas las capa sean flotantes y

otros que prefieren una aparencia estatica.

Yo personalmente prefiero la erencia relativa porque me permite que todas

las capas hijas se desplazen juntas con la capa madre

ej. si creas un menu usuario con tres submenu y kieres que lo tres sigan el

raton en una lista de productos lo unico que se hace y asiñar a la capa

madre las coordenadas del raton en el monitor y las capas hija se

posicionaran relativamente a la capa madre.

se que puedes obtener el mismo resultado con otro metodos.

pero entrando mas en el detalle:

el Browser gasta mucho mas recursos al posicionar la capas por separato

porqué debera de procesar cada capa como objecto individual en relacion a el objecto window(la pantalla)

principalmente un navegador se compone de un motor de texto y un motor
grafico

las capas con posicion absolute o flotantes de una hoja de estilo CSS,
seran procesadas:

por el motor de texto, que la posicionara segun el orden del documento
hypertextual

y sucesivamente por el motor grafico, que la reposicinara en relacion a la
ventana y la dibujera en la pantalla

a diferencia las capas con posicion relative de una hoja de estilo CSS,
seran procesadas:

por el motor de texto, que la posicionara segun el orden del documento
hypertextual

y sucesivamente por el motor grafico, solo la dibujera en la pantalla.


come ves la solucion a herencia permite que no se repitan los procesos
en los dos motores

si notas en mucha web sobrecargadas de capas este proceso es visibile
segun se vaya abriendo la pagina.

y por ultimo recuerda que una pagina web no es una aplicación de usuario

en una pagina web cuaquier cambio en el motor grafico o en el motor de
texo, obligará al browser a recostruir toda la pagina reposicionando en ella
todos sus objectos

en una aplicacion usuario cada objecto es libre de cambiar aspecto sin
generar cambios a los de mas objectos

espero te sirva.

perdonar mis errors gramaticales , soy italiano ... agradeceria todas
las sugerencias para mejorar mi castellano.

bye.