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!