Floating a picture with a caption to the right

These styles wrap text around a picture, by floating an image to the right with 10 pixels of space on the top, bottom and left sides. A special paragraph style sets up the caption. An optional border is on the bottom with some spacing. The example shows the result:

Chinese dancers at the Mall of America

Chinese dancers entertain at the Mall of America as part of an international festival.

Copy and paste these specifications in your style.css page:


#imgright
	{
	float:right;
	margin:10px 0 10px 10px;
	padding-bottom:10px;
	border-bottom:1px solid #000;
	}
#imgright p
	{
	font-size:9pt;
	line-height:10pt;
	margin-top:6px;
	text-indent:0;
	}

Now open your index.html page; copy and paste this code at the point where you want the text to start wrapping around the picture:


<div id="imgright" style="width:200px;">
	<img src="img/stage04.jpg" width="200" height="300" 
	alt="Include an alternate text description" />
	<p>Your caption goes here.</p>
</div><!-- #imgright -->

IMPORTANT: The beginning div tag has a piece of local style that sets the width equal to the width of the picture. When you use a float property, you must specify a width. We do it right in the tag to match the image.

Floating an image to the left

For an image to the left, create a similar specification; note that the margin has changed to put space to the right rather than the left:


#imgleft
	{
	float:left;
	margin:10px 10px 10px 0;
	padding-bottom:10px;
	border-bottom:1px solid #000;
	}
#imgleft p
	{
	font-size:9pt;
	line-height:10pt;
	margin-top:6px;
	text-indent:0;
	}

The HTML code is similar except for "imgright":

<div id="imgright" style="width:200px;">
	<img src="img/stage04.jpg" width="200" height="300" 
	alt="Include an alternate text description" />
	<p>Your caption goes here.</p>
</div><!-- #imgright -->

This image is centered using the #imgcenter div.

A centered image

Set up your CSS like this:

#imgcenter
 {
 margin:10px auto;
 padding:10px 0;
 border-bottom:1px solid #000;
 }
#imgcenter p
 {
 font-size:9pt;
 line-height:10pt;
 margin-top:6px;
 text-indent:0;
 }

The HTML should look familiar. You still need the style attribute with the correct width, matching the width of the image, for this to work correctly.

<div id="imgcenter" style="width:600px;">
	<img src="img/dana02.jpg" width="600" height="450" 
	alt="Include an alternate text description" />
	<p>This image is centered using the #imgcenter div.</p>
</div><!-- #imgright -->