Photos are best presented with captions or cutlines. The caption adds context to photographs and provides readers such information as the identity of the people in it, where it was taken and any other data not obvious in the photograph.

I used to publish photos with captions by creating an HTML table to contain the image and caption and then floating this within the text by giving the table a left or right alignment. Not only is the process cumbersome but many experts in web design advice against using tables for anything but tabular data.

There is a simpler way to do it.

A blog reader once emailed me to ask how I publish photos with captions, hence this blog post. I do it through CSS. I created several CSS classes for floating divs with different width dimensions and then I enclose the code for the image and the caption using these divs. This way, I could just include in the post a small thumbnail of the photo and a caption to explain what the photo is about. If readers want to view a larger image of the photo, they can just click on the thumbnail.

Don Pedro Cui St. in Cebu City as seen from the Sun.Star Cebu canteen. Click to enlarge.

1. Add the CSS classes for the photo box in your stylesheet
You first need to add CSS classes to your stylesheet. In WordPress, you need to edit the styles.css file of the theme you are using. In blogger, you just edit your template and add the styles before the closing </style> tag of your template file.

Here are my CSS styles

.smallcaptionleft {
display: inline;
float: left;
width: 250px;
margin: 5px;
padding: 5px;
border: solid 1px #ddd;
background: #ffffcc; font-size:90%;
line-height: 100%;
font-style: italic;
}

.smallcaptionright {
float: right;
margin: 5px;
padding: 5px;
width: 250px;
border: solid 1px #ddd;
background: #ffffcc;
font-size:80%;
line-height: 100%;
font-style: italic;
} 

I specified 250px as the width of my smallcaption class because the Small size rendered in Flickr and Zoomr has 240px as width and I usually choose this size for photos published in my blog.

2. Enclose photos and captions with div tags of your photobox classes
I place my code for the photos as well as the caption text within a <div class="smallcaptionleft"></div> tag if I want the photo box floated left and <div class="smallcaptionright"></div> if I want it floated right.

Since I use Lightbox 2.0 for the snazzy photo loading effect in this blog (go ahead, check it out by clicking on the photo above), I just enclose the entire Lightbox image code in the div tags. So the photo above is using this code:

<div class="smallcaptionright"><a href="http://static.zooomr.com/images/05b3797089fedf0841cc2651073a9d99a79702b9.jpg" rel="lightbox" title="Don Pedro Cui St. in Cebu City as seen from the Sun.Star Cebu canteen."><img src="http://static.zooomr.com/images/65ef8746ffd32c83854ea921d72e1c252b7646ef.jpg" width="240" height="180" alt="Don Pedro Cui St." /></a>Don Pedro Cui St. in Cebu City as seen from the Sun.Star Cebu canteen. Click to enlarge.</div>

Extend
You can play around with the style by specifying border styles or changing the background colors. Here’s a link to a tool that you can use to get the HTML code for colors. Here’s a site that has a good rundown of the different border styles. For tips on how to write good cutlines, read this article in Poynter.