Additional CSS Resources

How to Position Text around an Image with CSS

March 27, 2010

It’s always nice to have some pictures to go along with your text. However, if you just use the html to insert a photo into your text flow, you’ll find that it breaks up the flow of your text and just plops itself ungracefully right in the middle of your paragraph without rhyme or reason.

Fortunately, a little bit of CSS positioning can help us out here. Adding this to your CSS:

img {
	float: left;
}

will make the same thing look like this.

Now all we have to do is add some margin or padding to create a bit of space around the image

img {
	float: left;
	padding: 0 25px 25px 0;
}

And here you go.

However, if you use the image tag for your CSS, all the images in your site will float. Since this is a Basic CSS tip, I’ve used it for demonstration purposes only. A more practical approach would be to add a special class to the images you want to float.

<img class="floating" src="http://www.csstutorial.net/wp-content/uploads/2010/03/leia.jpg"
 alt="German Shepherd taking a nap">

and write the CSS like this:

img.floating {
	float: left;
	padding: 0 25px 25px 0;
}