Real World Style

Floating Thumbnails

Giraffe peeking out of the DIV...

The question

Suppose you want to have a bunch of thumbnail images that link to larger versions of the images - a fairly common type of web page. Suppose further that each image contains a short caption that you would like to keep centered underneath its image. And, in the interest of conserving browser window real estate, you want to line these image/caption pairs up in rows across the screen, but in such a way that they will wrap as necessary depending on the width of the browser window (liquid design). With the last requirement we have stepped out of the realm of TABLEs, and into the realm of CSS.

One Step at a Time

Let's look at this step-by step. The first requirement is that the thumbnails have their caption centered beneath them. This is relatively straightforward: in your HTML place your image, followed by a break, and then put your caption in a paragraph that is aligned to the center (via CSS).

Next we want to line up these image/caption pairs across the browser window. Using TABLEs for layout, each of these image/caption pairs would go into a separate TD. Using CSS we need to put them into a separate DIV. To get them to line up horizontally across the window we use CSS to FLOAT each of these DIVs to the left.

Here is what the CSS might look like at this point:

div.float {
  float: left;
  width: 120px;
  padding: 10px;
  }
  
div.float p {
   text-align: center;
   }

And the HTML:

<div class="float">
  <img src="image1.gif"><br>
  <p>caption 1</p>
</div>

<div class="float">
  <img src="image2.gif"><br>
  <p>caption 2</p>
</div>

<div class="float">
  <img src="image3.gif"><br>
  <p>caption 3</p>
</div>

And here is what it looks like in the browser:

Floating Thumbnail Example 1


The next requirement can only be solved using CSS. We want the image/caption pairs to wrap if there are more than will fit in the browser window. FLOATing the DIVs to the left has already solved this problem. If we repeat those sample thumbnails a couple of times, they will wrap in the browser window (to see this liquid design in action, change your browser window's width):

Floating Thumbnail Example 2


Now, suppose you had more than one category of thumbnails you wished to display on your page, and you want to group them visually, with a background and/or border. Simply enclose them in a container DIV:

div.container {
  border: 2px dashed #333;
  background-color: #fff;
  }

However when we do this we run into a problem. When you float an element with CSS, it no longer takes up any "space" and the background and border show up above the images instead of surrounding them. We need to put some content other than the floated DIVs into the container DIV. Like a spacer DIV:

div.spacer {
  clear: both;
  }

Now the following HTML (note that there are spacer DIVs at the top and bottom of the container DIV):

<div class="container">
<div class="spacer">
  &nbsp;
</div>

<div class="float">
  <img src="image1.gif"><br>
  <p>caption 1</p>
</div>

<div class="float">
  <img src="image2.gif"><br>
  <p>caption 2</p>
</div>

<div class="float">
  <img src="image3.gif"><br>
  <p>caption 3</p>
</div>

<div class="spacer">
  &nbsp;
</div>

</div>

Gives the following:

Floating Thumbnail Example 3