I'm wanting to be able to create a banner of floating images based on what are uploaded via users. The tool needs to have images of 50x50 and 100x100. At the moment, I just want to randomly display the images and tried to apply float:left. However, as you can see below - it leaves gaps.

Is there an easy way to do this without programatically positioning the images?

If you want the code so far, it's here:

.wall {
    width: 300px;
    background-color: red;
    display: table;
}

.wall img {

    float: left;

}

and

<div class="wall">
    <img src="man1.png" alt=""/>
    <!-- ETC... !-->
</div>