Duda/problema con la propiedad float

Nunca he usado la propiedad float en css y recien trate de usarla. Lo que quiero hacer es basicamente un apartado en mi web sobre el staff. Para ello quiero posicionar avatares de cada colaborador a la izquierda, que estand entro de una div con float:left. Y esto me ayuda a dejar el texto a al derecha del avatar. La cosa es que no me sale para hacer lo mismo con un segundo avatar y usuario. ¿Como se haria? >.<

Añade un

Código HTML :

<div style="clear:both;"></div>

despues de los datos de tu primer usuario y antes del avatar de tu segundo usuario

Me está dando errores y no sé si lo estaré usando bien. Pongo como float ésto:

Código :

<img src="./avatar_kenshuke.jpg" style="float:left" />

Luego...

Código :

<div style="clear:both;"></div>

NOP, estas mal, debe ser algo como:

Código HTML :

<div>
   <img src="./avatar_kenshuke.jpg" style="float:left" />
   <div style="float:left;">
      Todos los demás datos, pueden ser varias lineas
   </div>
   <div style="clear:both;"></div>
</div>
<div>
   <img src="./avatar_kenshuke.jpg" style="float:left" />
   <div style="float:left;">
      Todos los demás datos, pueden ser varias lineas
   </div>
   <div style="clear:both;"></div>
</div>
...

Y asi sucesivamente el clear:both es para que se fuerce el alto del div contenedor y no se monten el resto de elementos sobre el espacio que le corresponde.

Esto es aún mejor:

Código HTML :

<div style="overflow: hidden; height: 1%"> 
   <img src="./avatar_kenshuke.jpg" style="float:left" /> 
   <div style="float:left;"> 
      Todos los demás datos, pueden ser varias lineas 
   </div> 
</div> 
<div style="overflow: hidden; height: 1%"> 
   <img src="./avatar_kenshuke.jpg" style="float:left" /> 
   <div style="float:left;"> 
      Todos los demás datos, pueden ser varias lineas 
   </div> 
</div> 

DriverOp he probado tu código y no funciona como lo espera el amigo Kenshuke, al asignar una altura de 1% y poner overflow:hidden lo que consigues es:
1. Una altura variable dependiendo del alto total del contenedor de la etiqueta con este parametro
2. Ocultar cualquier elemento o parte de estos que exceda las dimensiones que especificas en este caso si es mas grande que el 1% estará parcialmente oculto.

Muchas gracias a ambos, ya logré resolverlo n__n ¿La etiqueta <hr> pone una línea horizontal? Tengo la costumbre de MyBBCode y no recuerdo bien si existía la etiqueta en html :3

NeoCesar escribió:

Cierto.
Lo de height: 1% es un hack para IE7 para que responda al overflow. Puedes quitarlo. También funciona si pones overflow: auto;

Bueno, ahora estoy intentando crear columnas tipo:

[]Algo []Algo
[]Algo []Algo

He estado buscando por google pero no me dan la solución que busco. ¿Alguien sabe?

¿Podrías ser un poco más explícito?

Vale, mirando algunos tutos encontré la solución Básicamente quería una tabla de 2/3 columnas sin que se vieran los bordes y simularan dos o tres columnas de listas. Y de ahí en cada bloque añadir una lista. Problema solucionado n__n