How to Float an Image to the Right of Text

Tablet showing news on desk

4FR / Vetta / Getty Images

If you're interested in learning how to float an image to the right of text, you'll be happy to know that it's a fairly simple task. There are many situations where programmers want an image on a Web page to appear inside of the text with the text flowing or wrapped around it. Thankfully, manipulating images is similar to manipulating text, so if you have experience with the latter, this process shouldn't be hard at all.

In fact, with the CSS float property, it's easy to float your image to the right of the text and have the text flow around it on the left side. Use this five-minute tutorial to learn how.

Getting Started

To begin, write a paragraph of text and add an image at the beginning of the paragraph. This should be done before the text but after the <p> tag):

Next, add a style attribute to the image and apply the float property:

Your text will be rammed right up against the image, so add some margins to the image to make it easier to read:

<img src="blwebcam-sample.jpg" alt="Suni" style="float:right;margin:0 5px 0 0;" />

The margin shorthand property applies margins in the order top, right, bottom and left (TRBL).

Wrapping Up

And that does it. Now you see that floating an image to the right isn't difficult at all. You may also be interested in floating an image to the left and floating it to the center. While the first move is possible, unfortunately, you can't float an image to the center, as that would typically require a two-column layout.