Languages

Web Style Sheets CSS tips & tricks

See also the index of all tips.

On this page:

Figures & captions

Eiffel tower

Scale model of the Eiffel tower in Parc Mini-France

HTML5 introduced an element to insert a figure with a caption. (We'll show a convention to do the same with HTML4 below.)

<figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Eiffel tower">
  <figcaption>Scale model of the
    Eiffel tower in
    Parc Mini-France</figcaption>
</figure>

For example, to float the figure to the right, in a space equal to 30% of the width of the surrounding paragraphs, these rules will do the trick:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

In fact, only the first two declarations (float and width) are essential, the rest is just for decoration.

Scaling the image

There is one problem here, and that is that the image may be too wide. In this case, the image is always 136 px wide and the figure is 30% of the surrounding text. So if you make the window narrower, it may be that the image overflows the figure (try it!).

If you know the width of all images in the document, you can add a minimum width to figure, like this:

figure {
  min-width: 150px;
}

St. Tropez

Saint Tropez and its fort in the evening sun

Another way is to scale the image itself. That's what we have done with the image on the right here. As you can maybe see if you make the window very wide, JPEG images don't scale very well. But if the image is a diagram or a graph in SVG format, scaling in fact works beautifully. Here is the mark-up we used:

<figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="St. Tropez">
  <figcaption>Saint Tropez and its
    fort in the evening sun</figcaption>
</figure>

And this is the style sheet:

figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
img.scaled {
  width: 100%;
}

The only addition is the last rule: it makes the image as wide as the inside of the figure (the area inside the border and the padding).

Putting the caption on top

Cap Ferrat

The Mediterranean Sea near Cap Ferrat

HTML allows the figcaption element to be either the first or the last element inside the figure and, without any CSS rules to the contrary, that will cause the caption to be at the top or the bottom of the figure, respectively.

But, no matter what the mark-up, you can also specify in CSS whether the caption should appear above or below the image. You do that by telling the browser that the figure should be formatted as a table, with the image as its only cell and the caption as the table's caption. Just add these rules to the style sheet from the previous sections:

figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
}

The style we used on this page includes a gray border around the figure. Unfortunately, when we use table layout to put the caption on the top or bottom, we need to specify the border differently, because the caption is put outside the border of the table. We fix that by putting a part of the border on the caption itself:

figure {
  border-top: none;
  padding-top: 0;
}
figcaption {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}

Figures & captions in HTML4

Eiffel tower

Scale model of the Eiffel tower in Parc Mini-France

HTML4, unlike HTML5, doesn't have an element that inserts a figure with a caption. It was proposed (see HTML3), but didn't made it into HTML4. Here is one way to simulate a figure element:

<div class=figure>
  <p><img src="eiffel.jpg"
    width="136" height="200"
    alt="Eiffel tower">
  <p>Scale model of the
    Eiffel tower in
    Parc Mini-France
</div>

Then in the style sheet you use the class "figure" to format the figure the way you want. For example, to float the figure to the right, in a space equal to 30% of the width of the surrounding paragraphs, these rules will do the trick:

div.figure {
  float: right;
  width: 30%;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}

As before, only the first two declarations (float and width) are essential, the rest is just for decoration.

Scaling the image in HTML4

To avoid that wide images overflow the figure, and if you know the width of all images in the document, you can add a minimum width to the DIV, e.g., like this:

div.figure {
  min-width: 150px;
}

St. Tropez

Saint Tropez and its fort in the evening sun

To scale the image to the width of the figure instead (as we have done with the image on the right), you can add a CLASS attribute and a CSS rule, very similar to the HTML5 example above. Here is the mark-up we used:

<div class=figure>
  <p><img class=scaled src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez and its
    fort in the evening sun
</div>

And this is the style sheet:

div.figure {
  float: right;
  width: 30%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

The only addition is the last rule: it makes the image as wide as the inside of the DIV (the area inside the border and the padding).

Putting the caption on top in HTML4

Cap Ferrat

The Mediterranean Sea near Cap Ferrat

To put the caption on top, add these rules to the style sheet from the previous sections:

div.figure {
  display: table;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

The '+' causes the rule to match a P that follows another P. Which means in this case that it matches the second P of the figure, the one that contains the caption.

(This technique may expose bugs in some browsers from before 2003, especially when combined with scaling the image, as I did here.)

As before, the gray border that we chose to put around the figures on this page will only be around the image itself with this technique. To put it around the image and the caption, add these rules:

div.figure {
  border-top: none;
  padding-top: 0;
}
div.figure p + p {
  padding: 0.5em;
  border: thin silver solid;
  border-bottom: none;
}
Bert Bos, style activity lead
Copyright © 1994–2016 W3C®

Created 17 January 2001;
Last updated Tue 06 Dec 2016 06:40:04 PM UTC

Languages

About the translations