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

Updated: 05/21/2018 by Computer Hope

Using the CSS float properties, you can float any image to the right of any text, as can be seen with the image to the right of this text. To do this on your web page, follow the steps below.

In this example, we will be using an external CSS file. By 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. If you already have a CSS file for your web page, edit your CSS file and add the following code.

2. Add the following code to the CSS file.


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

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


3. After the above code 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. Finally, add the class="floatRight" to any image you want to float on the right side of the container.

<img src="" class="floatRight">

Additional information