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

If your markup is like so:

div
 img
 img
 img
 row break
 img
 img
 img
 ...

Then you need to add this after every three blocks:

<br class="clear" />

But if your markup is like this:

div
 div
  img
  img
  img
 div
  img
  img
  img
 ...

..then you just need to apply the following .clear class to your inner DIVs.

Either way, add this to your stylesheet:

.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .clear { height: 1%; }
*:first-child+html .clear { min-height: 1px; }

You can use this class for all other elements that contain floats.

Answer 2

If IE >= 8 support is fine for you, you might want to consider using display: table instead of floats. Since you want to display a grid, this the more appropriate way of doing it.

http://www.quirksmode.org/css/display.html#table

Answer 3

I'd try to use display: inline-block; to style the elements containing each image. Example of HTML code for one container:

<style>
.figure {
    display: inline-block;
}
</style>

<div class="figure">
    <img src="littlepony.jpg" alt="My cute little pony" width="13" height="37" />
</div>

Now there a few pitfalls using this with IE6, IE7 and Firefox 2:

• IE 6 and 7 will only style inline elements that have hasLayout triggered, I mean you'll see inline-block behavior if you do this:

<!--[if lte IE 7]>
.figure {
    display: inline;
    zoom: 1; /* triggering hasLayout */
}
<![endif]-->

• Firefox 2 doesn't understand display: inline-block; so you'll have to precede the latter by another display instruction:

.figure {
    display: -moz-inline-stack;
    display: inline-block;
}

• now Firefox 2 is going to annoy you a bit. First, you must have only one child element in your .figure element, otherwise the children would ... stack. So if you have a legend under your image, insert a div between div.figure and img+p

    <div>
        <img src="littlepony.jpg" alt="Photo of my cute little pony" width="13" height="37" />
        <p>Second child of .figure>div and not .figure</div>
    </div>
</div>

Second (still only in Fx2), you'll notice from time to time that you can't anymore neither select text inside the -moz-inline-stack'ed element nor click on links it could contain. The fix is to position the added div relatively:

    .figure div {
        position: relative;
    }

Of course the conditional comment for IE6/7 must occur after regular CSS, otherwise it'll be of little help.

And finally, if no elegant solution works for you, use a TABLE. A simple table with only td and no th. If it occurs that:

• IE6 and 7 don't like display: table-sth
• your CMS causes problems to what would otherwise work fine on another site
• Firefox 3 support for inline-block is of no help

than yes it's better for everybody that you use a table and no half-solution causing problems to half your users ;)

Answer 4

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>