Floated Divs Inside A Div Has Bizarre Spacing

I have divs inside a a larger parent div. All these child divs have a 50% width. The idea is to have 2 columns. Also these child divs have a dynamic height. I have an example her

Solution 1:

Set the font-size for parent DIV of the DIVs to 0 shall solve this problem.

#modules { font-size:0px; }
.module { font-size:12px;} /*Or any size that you like*/

Fiddle here: https://jsfiddle.net/Math3w_C/y2jpr052/1/

Solution 2:

What you want here is two columns.

So you just need to add this css:

-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */column-count: 2;

-webkit-column-gap: 0px; /* Chrome, Safari, Opera */
-moz-column-gap: 0px; /* Firefox */column-gap: 0px;

See this jsfiddle: https://jsfiddle.net/y2jpr052/10/