¿por que se caen mis divs?

ASYNTETYCO · #1 (**permalink**) 05/05/2008, 17:27

Alguien sabe por que se caen mis divs alrededor de un div flotante a la izquierda? Este es mi codigo:

<body>
<div id="cabezera" style="clear: both"><img src="OXIGENO-Encabezado.gif" /></div>
<div id="separador" style="clear: both; height: 5px"> </div>
<div id="contenedor" style="width: auto; height: auto; margin-left: 20%">
<div id="bienvenidos" style="height:400px; width:100px; float: left;"><img src="Bienvenido.gif" width="100" height="400"/></div>
<div id="cajadetexto" style="height:400px; float: left; width: 600px; background-color: #FF2222; border-left: 1px dashed #EC0000; border-right: 1px dashed #EC0000"></div>
</div>
<div id="contenedorpie" style="margin-left: 20%; clear: both; width: auto; height: 20px">
<div id="espaciador" style="width: 100px; height: 20px; float: left"></div>
<div id="menu" style="width: 600px; height: 20px; float: left">
<div align="right">Inicio | ¿Oxigeno? | Publicidad | Diseño | Contacto</div>
</div>
</div>
</div>
</body>

Mikmoro · #2 (**permalink**) 05/05/2008, 18:02

¿Qué quieres decir con que se caen? No entiendo.

Mikel.

ASYNTETYCO · #3 (**permalink**) 05/05/2008, 20:46

Cita:

Iniciado por Mikmoro

¿Qué quieres decir con que se caen? No entiendo.

Mikel.

NO, me equivoque, edito, no lo he solucionado. Sabes que es lo que pasa Mikel, que cuando veo la pagina en pantalla completa el div aparece junto al primer div, o sea a su derecha. Estan juntos uno de cada lado. Pero cuando restauro la ventana del navegador(la hago mas chica dandole click en el cuadrito) se caen, o sea, el div que estaba de lado derecho del div flotando a la izquierda se cae hacia abajo. Yo quisiera que mejor apareciera la barra de desplazamiento en lugar de que por la falta de espacio el navegador tire hacia abajo los divs.

¿Tu sabes como puedo solucionarlo? he probado posicion absoluta y no?
Ahí pongo mi div para ver si tu sabes por que pasa eso. Los 2 divs de los que hablo estan en negritas. El div bienvenidos y el div cajadetexto.

<body>
<div id="cabezera" style="clear: both"><img src="OXIGENO-Encabezado.gif" /></div>
<div id="separador" style="clear: both; height: 5px"> </div>
<div id="contenedor" style="width: auto; height: 400px; margin-left: 20%">
<div id="bienvenidos" style="height:400px; width:100px; float: left"><img src="Bienvenido.gif" width="100" height="400"/></div>
<div id="cajadetexto" style="height:380px; float: left; width: 580px; background-color: #FF2222; border-left: 1px dashed #EC0000; border-right: 1px dashed #EC0000; overflow: auto; padding: 10px;">
<div class="Estilo8">Cuando "Iron Man," la primera película financiada completamente por la empresa, sea estrenada el viernes en cines, Marvel se distanciará de ser una compañía que otorga licencias por sus numerosos personajes populares y pasará a tener un mayor control sobre ellos. </div>
</div><div id="contenedorpie" style="margin-left: 20%; clear: both; width: auto; height: 14px">
<div id="espaciador" style="width: 100px; height: 14px; float: left"></div>
<div id="menu" style="width: 600px; height: 14px; float: left">
<div align="right" class="menu"><a href="index.html">Inicio</a> | <a href="oxigeno.html">¿Oxigeno?</a> | <a href="publicidad.html">Publicidad</a> | <a href="diseno.html">Diseño</a> | <a href="conceptualizacion.html">Conceptualización</a> | <a href="contactar.html">Contactar</a></div>
</div>
</div>
</div>
</body>

zegga · #4 (**permalink**) 05/05/2008, 22:51

Pues a mi manera de ver es simple, los dos divs que inicialmente estan flotando ponlos dentro de otro que no lo este, este ultimo con una dimension en width fija...

Ojo debes tener en cuenta lo siguiente en las dimensione de los dos divs internos
El Borderwidth + padding + margin +widht de ambos divs deben sumar igual o menos del tamaño del div que los contiene, sino tendras el mismo problema que se te mueve un divs hacia abajo.

Esto sucede porque a pesar de que ambos estan flotando las dimensiones en las cuales estan colocados son menores a la suma de las dimensiones en ancho de ambos divs.

Espero me haya explicado bien.
Cordiales Saludos

Mikmoro · #5 (**permalink**) 06/05/2008, 02:44

En realidad hay una solución mucho más sencilla: si el primer div, el de la izquierda, está flotado, el segundo, el de la derecha, no hace falta que lo esté. Flotarlo significa que permita que algo se coloque a su derecha (en este caso), y como no quieres colocar nada a la derecha del segundo div, pues no lo flotes y listo.

Hazlo así: quítale el float left al div de la derecha, y en su lugar ponle un margin-left: 100px;

Cita:

Esto hará que salga el scroll y no se "caiga" como dices al redimensionar la ventana.

Mikel.

P.D.: si te funciona bien hazme un favorcito: no escribas en azul, que da a los ojos una barbaridad. Resalta sólo cosas puntuales y se leerá más cómodamente.

ASYNTETYCO · #6 (**permalink**) 06/05/2008, 18:30

Bueno pues ya probe lo que me dijeron y pues primero probe lo que dijo mikel, le quite el float:left al segundo cuadro(cajadetexto) y aun asi se caia, que aunque le quite el float left se mantuvo junto al otro div no dejo de caerse.
Luego probe lo de zega, suma el padding, los bordes y el ancho de las dos cajas y las meti dentro de otra caja, con ancho fijo y si funciono. Ahora ya no se caen. Gracias a los dos. Voy a poner el codigo por si a alguien le sirve:

<div id="contenedor" style="width: 702px; height: 400px; margin-left: 20%">
<div id="bienvenidos" style="height:400px; width:100px; float: left"><img src="Bienvenido.gif" width="100" height="400"/></div>
<div id="cajadetexto" style="height:380px; width: 580px; background-color: #FF2222; border-left: 1px dashed #EC0000; border-right: 1px dashed #EC0000; overflow: auto; padding: 10px;">

-SOLUCIONADO-

Lo que si tengo duda es que voy a hacer cuando quiera meter en un futuro 2 cajas como meti estas, pero en lugar de ser con ancho en pixeles una sea con ancho en pxeles y la otra en porcentaje.

Mikmoro · #7 (**permalink**) 06/05/2008, 18:39

Con la solución que te puse en Firefox no se cae. En IE6 sí, pero se debe a cómo están hechos los bloques, y a que a explorer siempre hay que adaptarle después las cosas.

Me alegro de que lo hayas solucionado.

Mikel.

ASYNTETYCO · #8 (**permalink**) 06/05/2008, 18:43

Pues no lo probe en firefox, primero lo probe en ie y como no funciono pues ya no lo probe. Lo que si nunca entendi es por que me dijiste que le pusieramargin de 100px a la caja de la derecha? Pero bueno ya no importa.

Mikmoro · #9 (**permalink**) 06/05/2008, 18:47

Porque para los navegadores que respeetan los estándares (todos excepto IE), cuando una caja está flotada no ocupa espacio, por lo que la que está a su derecha, si tiene un fondo necesita un margen izquierdo igual al tamaño de la caja de la izquierda, o si no se metería debajo. Te puse 100 porque tu caja de la izquerda era de 100px.

Mikel.

ASYNTETYCO · #10 (**permalink**) 06/05/2008, 18:49

Cita:

Iniciado por Mikmoro

Porque para los navegadores que respeetan los estándares (todos excepto IE), cuando una caja está flotada no ocupa espacio, por lo que la que está a su derecha, si tiene un fondo necesita un margen izquierdo igual al tamaño de la caja de la izquierda, o si no se metería debajo. Te puse 100 porque tu caja de la izquerda era de 100px.

Mikel.

ENTENDIDO.