Creating images that are right-aligned on a web page
Issue
Creating images that are right-aligned on a web page.
Solution
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 below steps.
In this example we will be using an external CSS file. Doing this allows you to have any page with the CSS to have this ability.
1. Create a CSS file, if one is not already created.
2. Add the below code to the CSS file.
.floatRight{float:right;margin-left:20px}
If you think you will 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 this is done and the CSS file has been saved, make sure the HTML page is calling the CSS file using the below code.
<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="http://www.computerhope.com/logo.gif" class="floatRight">
Additional information
- See our float definition for additional information and related links on this term.