Wrapping the Image and Caption

Wrapping the Image and Caption

The first step is to wrap a container around the image and caption so they can be floated together. There are many elements that can be used such as paragraphs, lists, or even definition lists. However, for this lesson, you will use a <div> as shown in Listing 11.1.

Listing 11.1. HTML Code Containing the Markup for a Container, an Image, and Its Caption

<div class="imagecaption">
    <img src="chapter11.gif" alt="">
    A flower from my garden.
</div>
<p>
    Lorem ipsum dolor sit amet...
</p>

To make sure you don't target every <div> on the page, you should include a class within the selector as shown in Listing 11.2.

A class is used here instead of an ID because you might want to include more than one floated image and caption on a page.

Listing 11.2. CSS Code Showing the Selectors for Styling the Container

div.imagecaption {...}
div.imagecaption img {...}