How to create images that are right-aligned on a web page

Updated: 02/01/2021 by Computer Hope
Computer Hope logo

Using the CSS (Cascading Style Sheets) float properties, "float" an image so it stays to one side, allowing the text to flow 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, 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.

  1. Create a CSS file or edit your existing CSS file.
  2. Add the following code to the CSS file.
.floatRight{float:right;margin-left:20px}
Tip

Adding float:left makes the image float on the left side of the text.

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

.floatRightClear{float:right;clear:right;margin-left:20px}
  1. After the code above is added, save the CSS file and call it from each HTML (HyperText Markup Language) page using code similar to the example below. In our example, we've named the CSS file style.css.
<link rel="stylesheet" href="style.css" Type="text/css" media="all">
  1. Add class="floatRight" to any image you want to float on the right side of the container.
<img src="https://www.computerhope.com/logo.gif" class="floatRight">