Html+Css Div's alignment

Question

I need some help doing a container with floating div's with different width and height. The problem it self is that when I have a larger div I don't want to leave blank space when I can occupy it with other small div.

Even I have problems describing what I want to so so I will leave here this fiddel

https://jsfiddle.net/3rq6jegq/

<div style="background-color:gray;border:5px solid red;width:204px;height:500px">
    <div class="myClass" style="width:100px;">
    1
    </div>
    <div class="myClass" style="width:100px;height:100px;">
    2
    </div>
    <div  class="myClass" style="width:100px;">
    3
    </div>
    <div  class="myClass" style="width:100px;">
    4
    </div>
    <div  class="myClass" style="width:100px;">
    5
    </div>
    <div  class="myClass" style="width:100px;">
    6
    </div>
    <div  class="myClass" style="width:100px;height:100px;">
    7
    </div>
    <div  class="myClass" style="width:202px;height:100px;">
    8
    </div>
    <div  class="myClass" style="width:100px;">
    9
    </div>
    <div  class="myClass" style="width:100px;">
    10
    </div>
</div>

.myClass{
        border:1px solid black;
        float:left;
        background-color:white;
    }

As you can see in that fiddle i have the gray spots that have space to be filled with the divs 3,4,5 and 6, but I'm not sure how to do that. Other thing is that the containing div can have variable size, and the inner divs can have variable size to.