clearing nested floats

Question

I'm creating a tiled grid of images much like an image gallery with a grid of thumbnails, and I need the images to wrap onto the next row after 3 images. So I'm floating a bunch of divs that each contain an image and then clearing the float manually after three images.

The problem is that I'm working within a rather convoluted existing template that already makes use of float to arrange everything. Clearing the float in my grid scrambles the entire page, presumably because it's clearing every float in page so far. What can I do?

I'm clearing the float using by inserting a blank div. ie:

<div style='clear:right'>

Might one of the other methods for clearing floats work better?

Answer 1

1. Create a suitable container div (if you don't already have one)
2. Set a restrictive width on the container div - equalling the same that 3 images takes up.
3. Allow all images to float - they'll automatically wrap.
4. Set the container div with 'overflow: hidden', which will clear the floats for you.

A simplified version might look like this:

<style>

div#container {  
  overflow: hidden; 
  width: 300px; 
}

div#container img { 
  float: left; 
  width: 100px; 
}

</style>

<div id="container"> 

  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />


  <img src="" />
  <img src="" />
  <img src="" />

</div>