DIV flotantes duda

[Vandalo]

Saludos a todos los miembros del foro.

Esto más que un problema es simplemente una duda.

También debo decir que soy muy novato en esto y todo lo voy aprendiendo por ensayo y error, así que puede que no tenga mucha idea de lo que hago o digo.

Normalmente cuando quiero colocar una imagen y rodearla con texto, a la izquierda o a la derecha, lo único que hago es colocar la imagen con el atributo flotar, a la izquierda o a la derecha y posteriormente coloco el parrafo de texto y todo funciona de maravilla.

Sin embargo, si creo por ejemplo dos DIV y quiero que se conviertan en dos columnas como en los diarios: Creo dos DIV, defino sus anchos para que quepan ambas columnas y entonces tengo que colocar el atributo de flotar en AMBOS DIV.

Si aplico el atributo de flotar sólo en el primer DIV, sucede un "overlap" o se enciman por decirlo de alguna manera. ¿PORQUÉ?

En el caso de la imagen y el texto, basta con que aplique el atributo de flotar sólo a la imagen y al párrafo de texto no. Pero en el caso de los DIV hay que flotar ambos. ¿Porqué pasa esto?

A pesar de que los sitios que voy creando se muestran a la perfección, quiero entender esto.
Supongo que aún no entiendo muy bien como funciona esto de flotar los elementos y el flujo del documento y estas cosas me confunden @_@.

Gracias.

[pzin]

Bienvenido al foro.

¿Puedes aportar algún ejemplo de lo que dices? Una URL, imagen, código... Normalmente bastaría con flotar uno, al igual que haces con la imagen y el texto. Así que igual lo que dices es un caso más concreto que solo eso.

[Vandalo]

Pues simplemente tengo algo así:

Código:

<div style="width:400px; height:900px; border:1px solid red; float:left;">
Texto 1
</div>

<div style="width:400px; height:900px; border:1px solid red;">
Texto 2
</div>

Pongo los bordes para que se note el overlap.
Si lo hago así no funciona eso de las dos columnas.


Pero cuando lo hago así:

Código:

<div style="width:400px; height:900px; border:1px solid red; float:left;">
Texto 1
</div>

<div style="width:400px; height:900px; border:1px solid red; float:left;">
Texto 2
</div>

Entonces sí funciona. La única diferencia es que le he aplicado el float también al segundo DIV.

Además, estaba revisando yo este tutorial: http://html.net/tutorials/css/lesson13.php

Y sucede lo mismo. Cuando flotan una imagen a la izquierda del parrafo de texto, sólo aplican el float a la imagen y al párrafo no.

Pero en el ejemplo de las columnas, hacen 3 columnas con DIVs y le aplican el float a las 3 para que funcione.

Esa es mi gran duda. Según yo entendía, cuando aplicabas el float a un elemento, todo lo que coloques después se va acomodando a la izquierda o derecha hasta que apliques un clear o hasta que se alcance el ancho máximo del contenedor padre. ¿Entonces porqué los DIV no se colocan a un lado del otro con sólo flotar el primero?

[Vandalo]

¿Nadie? ¿Alguna respuesta?

[pzin]

No había visto tu respuesta.

El problema es que especificas el mismo ancho para ambos elementos, y al estar el primero flotado y salir del flujo natural (que en mi opinión es una forma extraña de salir del flujo, no real) te hace ese efecto tan extraño.

Si eliminas el ancho, verás que visualmente se pone al lado. Aunque si le aplicas un color de fondo, verás que no es que se ponga al lado, sino sólo su contenido.

En realidad ocurre la misma cosa cuando es una imagen y un párrafo: http://jsfiddle.net/XNm6f

Si al párrafo le pones un ancho igual que la imagen, te ocurrirá lo mismo que a ti, que el contenido se irá hacia abajo, ya que a lo ancho no le queda sitio.

[phillipecw]

Prueba sin utilizar "float", y utiliza "display:inline-block".

Saludos.