Creating a Side-By-Side Variation

Using the same selectors and HTML code, it is possible to change the layout so that the images and their captions are displayed side by side.

First, the width of the <div> will need to be increased to accommodate the caption beside the image. The declaration can be changed to width: 250px.

Next, some padding-bottom and a border can be added to the <div>.

The background declaration can be removed completely.

The image must be floated to the left so that the caption can sit beside it. Width does not need to be defined in this case because the image has its own intrinsic width.

Finally, the image will need to be given some margin so that the caption doesn't butt up against it. You can use 10px for all sides except the bottom as shown in Listing 12.8. The results can be seen in Figure 12.7.

Listing 12.8. CSS Code for the Side-By-Side Variation

div.thumbnail {     float: left;     width: 250px;     margin: 0 10px 10px 0;     padding-bottom: 10px;     border: 1px solid #777; } div.thumbnail img {     float: left;     border: 1px solid #777;     margin: 10px 10px 0 10px; } div.thumbnail p {     margin: 0;     padding: 10px; } 

Figure 12.7. Screenshot of the side-by-side variation.