How to Wrap Text Around Images in your Web Pages

The best way to position your Web images so text and other objects wrap around them is to use the CSS property of float. You can float either right or left. You can then add margin to add some spacing between the floated image and page content. I have created some code for you that will help you to float images and allow text to wrap.

Float to the Left and to the Right

Start by creating 2 CSS classes that you can recycle and use throughout your site.

.floatright {
	float: right;
	margin: 6px;
	}
.floatleft {
	float: left;
	margin: 6px;
}

Then apply the appropriate class to each image needing floating.

<img src="photo.jpg" alt="oscar1" width="240" height="159" class="floatright" />
<img src="photo.jpg" alt="oscar2" width="240" height="159" class="floatleft" />

Add a Caption

In order to add a caption, you wrap your image in a div tag. Start by creating a CSS class that will control the div. I added some style to my classes. I have created two separate sets of classes: one for right floats and one for left floats.

Create CSS classes to style the image within the div and the caption that you will insert after the image but still inside of the div tag. The class for caption text has been styled here.

Using these style recipes, you should be able to easily update the styling to match your site. The really important bits of code includes the float properties.

.imgfloatright {
	border-color: maroon;
	border-style: solid;
	border-width: 2px;
	width: 250px;
	float: right;
	text-align: center;
	padding-bottom: 4px;
	margin: 6px;
}
.imgfloatright img {
	margin: 4px;
}
.imgfloatleft {
	border-color: maroon;
	border-style: solid;
	border-width: 2px;
	width: 250px;
	float: left;
	text-align: center;
	padding-bottom: 4px;
	margin: 6px;
}
.imgfloatleft img {
	margin: 4px;
	}
.caption {
	color: maroon;
	font-variant: small-caps;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: .9em;
	}

The HTML code adds the floating class to the wrapping div rather than straight to the img tag. I have also used a line break tag (
) before adding the caption text. I then wrapped a span tag around the caption text to style it with my caption class.

<div class="imgfloatright">
	<img src="../photos/oscar3.jpg" alt="oscar3" width="240" height="159"/>
	<span class="caption">Oscar is feeling comfy</span>
</div>

Style Your Caption with a Background Color

To style your caption, you simply create a different class and apply it to your span tag. I added a background color to the span, but because a span tag is an inline tag I had to change the display to block so it would fill the width of the div. However, I wanted some margin on each side of the span to make it match the image width so I changed the width of the span and I added auto margin on the right and on the left to center it.

.captionbkgd {
	background-color: maroon;
	color: white;
	font-variant: small-caps;
	font-weight: bold;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: .9em;
	display: block;
	width: 240px;
	margin-left: auto;
	margin-right: auto;
}

HTML code:

<div class="imgfloatleft">
	<img src="../photos/oscar4.jpg" alt="oscar4" width="240" height="159"/>
	<span class="captionbkgd">Oscar is a nice companion</span>
</div>

Download the File

I have included the HTML and CSS file for you to download and use on your own.