Spostare div su due colonne con spazi adeguati

Salve,
avrei la necessità di spostare dei div in due colonne nella pagina, ho risolto tentato in questo modo:

Codice:

---

div#id {
width: 50%;       
float:left;
}

---

In questo modo si dispongono a due colonne come desideravo però è sorto un problema, vorrei avere lo stesso margine in tutti i box. Infatti se un div è più alto di un'altro, la disposizione si sfasa aumentando il margine nel successivo, vi lascio un'immagine per capire meglio: http://puu.sh/5KwcB.png
Come vedete vi è un distacco tra i div per il fatto che quello a destra ( se sarebbe il secondo ) è più alto di quello precedente.

Come posso risolvere questo problema?

Potresti inserire ai 2 div lo stesso class ed impostare il margine in quel class.

http://masonry.desandro.com/

Grazie ad entrambi.

@dazedandconfused: Ottimo, molto interessante, lo provo immediatamente!

@australiafever: Scusami non ho capito, cosa intendi? La situazione si può ripetere in quanto quei div rappresentavo dei post inviabili da utenti.

Praticamente tu vorresti fare un layout simile a quello di Google +, Pinterest? Se è così allora lascia perdere il mio post precedente, ci sono 2 vie.

1. Segui il link postato poco sopra (via più semplice)

2. Provi a cercare una soluzione continuando a sperimentare (che non guasta mai), che però è la via più lunga e complessa.

Sto provando ad utilizzare Masonry, ma vi sono alcuni problemi.
L'ho inizializzato con jQuery in questo modo:

Codice:

---

var $container = $('#post-container');
$container.masonry({
  columnWidth: 200,
  itemSelector: '.post'
});

---

Solo che non in tutte le risoluzioni funziona, infatti credo proprio che la proprietà columnWidth lavora in formato px, è possibile agire tarmite percentuale? Oppure vi è un'altra via?

Risolto eliminando la proprietà ed aggiungendo margini al class .post

Grazie tante!