The Inline-Block Thumbnail Gallery

A Gallery is a Menu is a List

A thumbnail gallery is a list, and you should structure it as such. The sample galleries in this article all use the same markup, except for the identifier given each <ul>.


<ul>
  <li>
    <p><a href="some.jpg"><img src="tnail-sample.jpg"
           alt="" />caption</a></p>
  </li>
  …
</ul>

Floating the Thumbnails

Common practice has been to float the list items. In most cases, you can make certain assumptions:

  • The height of each combined thumbnail and its caption can be fixed to some common value; or
  • The number of thumbnails per row is known.

When there is no more room for another thumbnail, a floated list item will drop to the next row and scoot over until it hits something. There is no problem if all items are the same height. This is a good usage of floats, since more or fewer items will line up in a row, depending of the widths of the container and the items.

If an item sticks down even one pixel below another item to its right — I'm assuming you're floating left — then the item trying to slide over will bump into it and stop right there.

To counter the item being stopped by the taller item, you can clear the first item of each row, which means you have to know which item will be the one to drop down and slide over.

This first example floats the list items, but does not try to make each item the same height. Assuming you want the rows to contain all the items there's room for, varied widths for the container make it infeasible to know the starting item for each row. Modern browsers properly shrink-wrap float elements. IE is not a modern browser and requires the width be set.

Using the inline-block display value

The inline-block display method is interesting. Internally, it's a block element, but from the outside it acts like an inline element. I'll let the W3C describe it:

inline-block

This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element. W3C:CSS2.1

For contents of an indeterminant width, the specifications don't seem all that clear. Firefox, Opera and Konqueror/Safari shrink-wrap the contents, making a box no larger than it has to be. IE does not. If the contents are block elements, the outer box will be full width — effectively leaving it block, and not inline-block.

This is illustrated in this next example. Notice the interesting possibilities that varied widths offer.

In spite of claims to the contrary, IE does not support {display: inline-block;}. After declaring an element inline-block, it is necessary to restate the display value as "inline" in another ruleset.

Cross Browser inline-block

The only difference between this and the previous example is this has an explicit width set for the list items.

Inline-Block Lacks Full Cross-Browser Support

IE seems to have the poorest support for inline-block. It's method appears to be to trigger hasLayout, allowing an inline element to have height and width. It is then necessary to restate the display value as inline.

Opera and Konqueror/Safari seem to render inline-block pretty much as expected, across the board. I should mention that I did only minimal testing in these browsers.

Firefox works well, but does require that the child elements of the inline-block container be block elements. Having a child of type inline breaks the display. At this time, Firefox (Gecko 1.8) does not actually support inline-block, but a proprietary testing value of -moz-inline-box instead. Firefox 3 (Gecko 1.9) does support {display: inline-block;}. IE is now the only major browser lacking true support.

Being able to work around browser shortcomings and differences to make inline-block work adds an additional tool to the bench. Having an alternative to floating block elements will make many layouts easier to accomplish.