Kevin A. Freitas

Wrapping gallery of thumbnails with captions

By Kevin A. Freitas

Skip to final sample »

Anyone creating an web image gallery likely stuffs their thumbnails and captions within the cells of a table or two. Although this works well for webpage designs constrained by inflexible widths, it doesn't work for those of us who have fluid layouts. It's relatively simple to create said table with a width set as a percentage of its parent <div> or <td> (if you're into nesting tables) to fake a flexible gallery but what you're really getting is a bunch of table cells getting wider or thinner without really increasing the use of your on-screen real estate.

There are no columns

If you're like me you create your gallery thumbnails to have similar dimensions to one another. For this example we'll assume that no thumbnails will get larger than 100 pixels in width or height. This is going to allow us to define a box that surrounds each thumbnail and caption.

The markup for this flexible gallery is simple. Each thumbnail and caption sit within their very own <p> paragraph tag:

<p><img src="..." alt="..." /><br />Caption goes here</p>
        

Place as many of these as you need within a <div> tag:

<div id="gallery">
    <p><img src="..." alt="..." /><br />Caption goes here</p>
    <p><img src="..." alt="..." /><br />Caption goes here</p>
    .
    .
    .
</div>
        

The CSS to make this effect happen is also simple but requires us to guess a little at the desired size of each gallery item's box. First, the "gallery" <div> should have a flexible width. I'll set it to 50% of the page for this example.

#gallery {
    width: 75%;
}
        

Next I'll style the blocks that contain our thumbnail and caption. This is where we guess a little at the maximum size each should be. I'll make the width 100 pixels and height 150 pixels along with a bit of padding to help space things out.

#gallery p {
    float: left;
    width: 100px; height: 150px;
}
        

View structural | stylized sample »

The caveats

If you have wildly varied thumbnail sizes and proportions this method may not meet your needs for cleanliness. You could certainly leave the height of each item's box up to the thumbnail's height but the floating will be severely disjointed once you try to show off your cool vertical panorama. See example »

Although minor, the idea of having a fixed number of columns and rows may comfort you. Newer cinematic or multiple screen displays may leave your gallery to stretch out in one long row. For those of whom this is an issue you might want to stick with tables.

If you have any elements below your gallery like a footer you need to make certain to use the "clear: both" CSS property to ensure it won't mash itself into your gallery.

Tested in...

• Mozilla/Firefox 1.0
• IE 5, 5.2 (mac), 5.5, 6
• Safari

(2004-11-28)

« Back to Articles