Using the CSS float properties, you can “float” any image so it stays to one side, and the text flows around it. To do this on your web page, follow the steps below.

Create right-aligned image

In our example below, we are using an external CSS file. Using an external CSS file, you can create a floating image on any page that includes a link to the CSS file. External CSS files also make it easier to change any settings you may want to adjust in the future.

  • Create a CSS file or edit your existing CSS file.
  • Add the following code to the CSS file.

.floatRight{float:right;margin-left:20px}

If you want to have more than one image floating on the right, also add the following line to the CSS file.

Adding float:left would make the image float on the left side of the text.

.floatRightClear{float:right;clear:right;margin-left:20px}

  • After the code above is added, save the CSS file and call it from each HTML page using code similar to the example below. In our example, we’ve named the CSS file style.css.
  • Add class=“floatRight” to any image you want to float on the right side of the container.
  • How to align text on a web page in HTML or CSS.
  • See our float definition for additional information and related links.
  • HTML and web design help and support.