Foros del Web » Creando para Internet » CSS »

Posicionar sin salir del flujo

Estas en el tema de Posicionar sin salir del flujo en el foro de CSS en Foros del Web. Mi situacion es la siguiente, pongo dos divs y se colocan uno y el otro debajo(que no detras) y quiero ponerlo a la derecha He ...
  #1 (permalink)  
Antiguo 14/07/2009, 18:29
 
Fecha de Ingreso: julio-2009
Mensajes: 21
Antigüedad: 8 años, 5 meses
Puntos: 0
Posicionar sin salir del flujo

Mi situacion es la siguiente, pongo dos divs y se colocan uno y el otro debajo(que no detras) y quiero ponerlo a la derecha

He visto mil respuestas utiles tipo l de la izquierda relativo y al de la derecha absoluto y le das la distancia o a todo posiciones absolutas y colocas, pero el problema es que se salen del flujo de pagina, hay alguna forma de colocar 2, 3 4... divs seguidos sin que ninguno quede fuera del flujo?

display:inline-block no sirve o no lo se hacer con internet exploter

Última edición por rangdang; 14/07/2009 a las 19:59
  #2 (permalink)  
Antiguo 14/07/2009, 22:02
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Posicionar sin salir del flujo

no te compliques usa un "float" para que tengas los 2 juntos
Código html:
Ver original
  1. <div class="div_uno">
  2.     <p>esto es un div izquierdo</p>
  3. </div>
  4. <div class="div_dos">
  5.     <p>esto es un div izquierdo</p>
  6. </div>
Código css:
Ver original
  1. body{background:#DDD;}
  2. .div_uno, .div_dos{float:left;width:500px;}
  3. .div_uno{background:#CCC;}
  4. .div_dos{background:#FFF;}

Recuerda que como advertencia W3C "todo elemento flotado debe tener su "width" correspondiente chao y suerte!...
  #3 (permalink)  
Antiguo 15/07/2009, 03:05
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Posicionar sin salir del flujo

Y para evitar problemas mírate esto:

http://www.librosweb.es/css_avanzado...ar_floats.html

Que creo puede ser por lo que no quieras que salgan del flujo.
__________________
No diseñes usando tablas.
  #4 (permalink)  
Antiguo 15/07/2009, 07:46
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicionar sin salir del flujo

¿Posicionar sin salir del flujo?
¿Saltar sin despegar los pies del suelo?
Flótalas como dice Alexk
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 15/07/2009, 08:36
 
Fecha de Ingreso: julio-2009
Mensajes: 21
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Posicionar sin salir del flujo

alexk - si asi es como lo tengo pero ocurre que al flotar sin mas, lo sacaba del flujo y el contenedor quedaba reducido a una linea entonces el siguiente div con posicionamiento relativo que añadiese quedaba detras de el resto al finalizar la linea del contenedor.

hades87- estoy haciendo pruebas y me parece que eso es exactamente lo que estaba busando

Muchísimas gracias a los dos por vuestro interés

Y no cerréis esto todavía, si termino y va bien avisaré
  #6 (permalink)  
Antiguo 15/07/2009, 08:40
 
Fecha de Ingreso: julio-2009
Mensajes: 21
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Posicionar sin salir del flujo

Cita:
Iniciado por kseso? Ver Mensaje
¿Posicionar sin salir del flujo?
¿Saltar sin despegar los pies del suelo?
Flótalas como dice Alexk
Un saludo
y si saltas dejándote las zapatillas en el suelo?

las flotare como dice alex y las tratare como dice hades 87 lo de alex es la forma de situarlas en paralelo, pero no de hacer que el div contenedor crezca con el contenido.
  #7 (permalink)  
Antiguo 15/07/2009, 08:50
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Posicionar sin salir del flujo

Bueno si el problema es que se te sale del contenedor simplemente añade al contenedor overflow:hidden

Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <style type="text/css">
  6. body{background:#DDD;}
  7. .contenedor{width:800px; border:1px solid #333; height:auto; overflow:hidden;}
  8. .div_uno, .div_dos{float:left;width:200px; margin:3px 10px;}
  9. .div_uno{background:#CCC;}
  10. .div_dos{background:#FFF;}
  11. </head>
  12.  
  13. <div class="contenedor">
  14. <div class="div_uno">
  15.     <p>esto es un div izquierdo</p><p>esto es un div izquierdo</p><p>esto es un div izquierdo</p><p>esto es un div izquierdo</p><p>esto es un div izquierdo</p><p>esto es un div izquierdo</p>
  16. </div>
  17. <div class="div_dos">
  18.     <p>esto es un div izquierdo</p> <p>esto es un div izquierdo</p> <p>esto es un div izquierdo</p> <p>esto es un div izquierdo</p> <p>esto es un div izquierdo</p> <p>esto es un div izquierdo</p>
  19. </div>
  20. </div>
  21. </body>
  22. </html>
__________________
WFC
codigo82
  #8 (permalink)  
Antiguo 15/07/2009, 09:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicionar sin salir del flujo

Hola Rangdang
Lo que quería hacerte ver con esa pequeña broma es que es un contrasentido tu enunciado.
Modificar la ubicación que le correspondería ocupar a un elemento por sus propiedades intrínsecas y el lugar que ocupa en el html es lo que significa sacar del flujo. (dicho así de pronto).

Y una de las características de los elementos flotados es lo que te ocurre, al estar fuera del flujo no hacen crecer a su contenedor.

Como te apunta Willyfc, eso lo arreglarás añadiendo la propiedad overflow.

Un saludo
P.D.: saltes descalzo o calzado, tus pies pierden el contacto con la superficie sobre la que se apoyan
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 15/07/2009, 09:40
 
Fecha de Ingreso: julio-2009
Mensajes: 21
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Posicionar sin salir del flujo

P.D.: saltes descalzo o calzado, tus pies pierden el contacto con la superficie sobre la que se apoyan [/QUOTE]

si pero si me descalzo el chicle que tengo pegado a la suela no se elevará conmigo:-p

la intencion no es no despegarse, la intencion es que el chicle se quede tocando suelo

si que es verdad que pedia algo que no puede ser pero no sabia lo de "descalzarse" con el overflow
  #10 (permalink)  
Antiguo 15/07/2009, 09:44
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Posicionar sin salir del flujo

ohhhh...... kseso? no entendi nada; aun etamos hablando de divs? jeje
hay cultura en FW me gusta...

sip rangdang como te dice willyfc y kseso? con overflow queda...
chao y suerte...
  #11 (permalink)  
Antiguo 15/07/2009, 10:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicionar sin salir del flujo

Pues nada, rangdang, si tanto te gustan los matices y la precisión: sustituye "apoyan" por "sustentan", limpia la parte inferior que entra en contacto con el suelo de aquello que uses para cubrir y adornar tus pies antes de entrar en casa y aplica lo sugerido (previa o posteriormente).

Saludos
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 15/07/2009, 11:27
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Posicionar sin salir del flujo

Lecciones prácticas con kseso?, hoy la diferencia entre apoyan y sustentan!
__________________
No diseñes usando tablas.
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 16:33.