How to Float an Image to the Right of Text

This five-minute tutorial explains how

Digital Tablet PC With News On Desk (XXXL)
4FR/Vetta/Getty Images

Are you interested in learning how to float an image to the right of text? If so, you're not alone. 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):

<img src="blwebcam-sample.jpg" alt="Suni" />
Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua. Sunt in culpa quis nostrud exercitation excepteur sint occaecat. Mollit anim id est laborum.

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

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

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.

Was this page helpful?