Sams Teach Yourself CSS in 10 Minutes

Chapter 11. Positioning an Image and Its Caption

In this lesson, you will learn how to position and style an image and its 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.

Example 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 ...