Question

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 50×50 and 100×100. 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>

Answer 1

I think you will need to write some code. The first thing that I notice is that the gaps are all fillable by a 50×50 (the smallest) image. I would try implementing the following:

1. Fill the page with 50×50 images randomly.
2. Absolutely position a few 100×100 images. These will cover 4 underlying 100×100 images.

Seems like this will work (haven’t tried), but hopefully that helps.

Bob