[SOLUCIONADO] Inline-block y float

[Heent]

Buenos días compañeros, tengo dos dos div i me gustaría que se mostraran como dos columnas una al lado del otro.


Opción 1
He probado con "display: inline-block;" y funciona correctamente si no hay texto dentro de los div como esta imagen:
http://subir.cc/images/capturlcl.png

Ahora viene cuando meto texto en los div, si en uno hay más que en el otro, uno de los div se mueve así:
http://subir.cc/images/capturded.png

Que está pasando y como puedo solucionarlo :S


Opción 2
He probado con "float: left;" y funciona correctamente con y sin texto. El problema es cuando añado otro grupo de dos div que tienen que ser dos columnas más. Por ejemplo:

Código HTML:

<div id='grupo_1' class='grupo_col'>
    <div class='col_1'></div>
   <div class='col_2'></div>
</div>
<div id='grupo_2' class='grupo_col'>
    <div class='col_1'></div>
   <div class='col_2'></div>
</div>
 

Me gustaría que se mostraran como bloques sin embargo me ocurre esto:
http://subir.cc/images/capturxux.png

No se supone que el div del grupo se muestra como un blocke?
Entonces para que se muestre correctamente tengo que hacer un "clear: both;" a la class grupo_col. Pero entonces tengo el problema que no me hace caso cuando le meto una separación entre grupos, ignora el "margin-top: 10px;" por ejemplo.

¿Que está ocurriendo?


Nose si me he explicado muy bien :P

Muchas gracias!

[webosiris]

las img que pones no se ven, me redirigen a un msn.png ¿?

de todas formas lo que está ocurriendo es que los grupo_col, al tener todos sus elementos flotados, en realidad tiene una altura de 0 (te puedes dar cuenta poniéndole un fondo o mirando con el firebug). Agrega esto y me dices:

Código CSS:

.grupo_col{overflow:hidden}
 

[Heent]

webosiris no lo entiendo lo de las imágenes pues, a mi me salen bien :S

Funciona, muchas gracias!!!

un saludo

[pzin]

En un foro comúnmente se utilizan servicios de hospedaje de imágenes gratuitos. Es más fácil y además siguen ahí el día de mañana para cuando otro tenga la misma duda.