In this lesson, you will learn how to create a photo gallery using a series of floated
<div> elements. You will also learn how to use two backgrounds images to create a flexible container.
First of all, you will need a series of thumbnail images and captions. Each thumbnail image and caption will be placed inside a
<div> element. The caption will then be placed inside a
<p> element as shown in Listing 12.1.
To make sure you don’t target every
<div> on the page, you should apply the same classname to each one.
Example 12.1. HTML Code Containing the Markup for a Thumbnail Gallery
<div class="thumbnail"> <img src="chapter12c.jpg" alt=""> <p>A flower from my garden</p> </div> <div class="thumbnail"> ...