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

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.

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}

If you want 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}

3. 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.

<link rel="stylesheet" href="style.css" Type="text/css" media="all">

4. 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">