O'Reilly logo

Sams Teach Yourself CSS in 10 Minutes by Russ Weakley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required