Floating images with multiple sizes in CSS
- by Jamie Chapman
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>
