Posicionar sin salir del flujo

rangdang · #1 (**permalink**) 14/07/2009, 17:29

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

alexk · #2 (**permalink**) 14/07/2009, 21:02

no te compliques usa un "float" para que tengas los 2 juntos

Código html:

Ver original<div class="div_uno">
    <p>esto es un div izquierdo</p>
</div>
<div class="div_dos">
    <p>esto es un div izquierdo</p>
</div>

Código css:

Ver originalbody{background:#DDD;}
.div_uno, .div_dos{float:left;width:500px;}
.div_uno{background:#CCC;}
.div_dos{background:#FFF;}

Recuerda que como advertencia W3C "todo elemento flotado debe tener su "width" correspondiente chao y suerte!...

hades87 · #3 (**permalink**) 15/07/2009, 02:05

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.

kseso? · #4 (**permalink**) 15/07/2009, 06:46

¿Posicionar sin salir del flujo?
¿Saltar sin despegar los pies del suelo?
Flótalas como dice Alexk
Un saludo

rangdang · #5 (**permalink**) 15/07/2009, 07:36

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é

rangdang · #6 (**permalink**) 15/07/2009, 07:40

Cita:

Iniciado por kseso?

¿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.

willyfc · #7 (**permalink**) 15/07/2009, 07:50

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

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{background:#DDD;}
.contenedor{width:800px; border:1px solid #333; height:auto; overflow:hidden;}
.div_uno, .div_dos{float:left;width:200px; margin:3px 10px;}
.div_uno{background:#CCC;}
.div_dos{background:#FFF;}
</style>
</head>
 
<body>
<div class="contenedor">
<div class="div_uno">
    <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>
</div>
<div class="div_dos">
    <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>
</div>
</div>
</body>
</html>

kseso? · #8 (**permalink**) 15/07/2009, 08:31

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

rangdang · #9 (**permalink**) 15/07/2009, 08:40

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

alexk · #10 (**permalink**) 15/07/2009, 08:44

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...

kseso? · #11 (**permalink**) 15/07/2009, 09:31

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

hades87 · #12 (**permalink**) 15/07/2009, 10:27

Lecciones prácticas con kseso?, hoy la diferencia entre apoyan y sustentan!