Foros del Web » Creando para Internet » CSS »

¿por que se caen mis divs?

Estas en el tema de ¿por que se caen mis divs? en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/05/2008, 18:27
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
¿por que se caen mis divs?

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>
  #2 (permalink)  
Antiguo 05/05/2008, 19:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: ¿por que se caen mis divs?

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

Mikel.
  #3 (permalink)  
Antiguo 05/05/2008, 21:46
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
Re: ¿por que se caen mis divs?

Cita:
Iniciado por Mikmoro Ver Mensaje
¿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 &quot;Iron Man,&quot; 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>

Última edición por ASYNTETYCO; 05/05/2008 a las 22:52 Razón: Por que me equivoque.
  #4 (permalink)  
Antiguo 05/05/2008, 23:51
 
Fecha de Ingreso: abril-2006
Mensajes: 72
Antigüedad: 11 años, 7 meses
Puntos: 0
De acuerdo Re: ¿por que se caen mis divs?

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
__________________
Jesus!! Yo confio en tí :-)

Última edición por tunait; 07/05/2008 a las 01:56 Razón: remover firma
  #5 (permalink)  
Antiguo 06/05/2008, 03:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: ¿por que se caen mis divs?

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:
<div id="cajadetexto" style="height:400px; margin-left: 100px; width: 600px; background-color: #FF2222; border-left: 1px dashed #EC0000; border-right: 1px dashed #EC0000"></div>
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.
  #6 (permalink)  
Antiguo 06/05/2008, 19:30
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
Re: ¿por que se caen mis divs?

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.
  #7 (permalink)  
Antiguo 06/05/2008, 19:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: ¿por que se caen mis divs?

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.
  #8 (permalink)  
Antiguo 06/05/2008, 19:43
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
Re: ¿por que se caen mis divs?

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.
  #9 (permalink)  
Antiguo 06/05/2008, 19:47
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: ¿por que se caen mis divs?

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.
  #10 (permalink)  
Antiguo 06/05/2008, 19:49
 
Fecha de Ingreso: abril-2008
Ubicación: Oaxaca
Mensajes: 256
Antigüedad: 9 años, 7 meses
Puntos: 2
Re: ¿por que se caen mis divs?

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:02.