CSS Float Left and Clearfix not working together

Question

I have a simple image gallery dynamically controlled by PHP to add and remove image thumbnails from a page. The problem I have is that I want the images to be aligned next to eachother until there is no room on that row and is forced to start another.

I have tried using float:left which worked but the containing body div with a height set to auto resized itself to not include the images. I then tried adding clear:both; to the images which fixed the body div issue but now has the images directly underneath eachother.

I've used float:left before in many cases but the containing div had a fixed height.

Does anyone have any idea on how I can fix this?

Thanks heaps :)

Answer 1

You have to add an empty div with "clear: both;" as the last element in the div containing the images.

If you add "clear: both;" to an image, that image will be placed on a new row because it wont allow floated elements on either side of it.