Creating images that are right-aligned on a web page

Updated: 05/19/2017 by Computer Hope

LogoUsing 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 below line.

2. Add the below code to the CSS file.

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

Tip: 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 below line to the CSS file.

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

3. After the above code has been created 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 hand side.

<img src="https://www.computerhope.com/logo.gif" class="floatRight">

Additional information