css - floating a list of divs of variable height in 3 column format -

i have list of product divs containing 2 more divs each displayed vertically within - top 1 containing image , bottom 1 text. text variable in size outer divs size variable. these outer divs float left , go 3 row until div long text happens next row starts after column, leaving gap.

so if have row 2nd div has 3 lines of text other two's 1, 4th div start not in first position on next line in 3rd.

here image demonstrating see vs second do:

and i'm aiming do

do not use float. take @ fiddle:

jsfiddle demo

css:

.block {   width: 33.33%;   display: inline-block;   vertical-align: top;   margin-right: -3px; }  .inner {   min-height: 100px;   margin-bottom: 10px;   background: #000; }