Online Source For HTML, XHTML, CSS, JavaScript, AJAX, XML, PHP, Ruby, PHP Frameworks

HTML doesn’t have an element that allows to insert a figure with a caption. It was once proposed (see HTML3), but never made it into HTML4. Here is one way to simulate such a figure element:

<div>
  <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 25% of the width of the surrounding paragraphs, these rules will do the trick:

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

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