Aligning Images Left or Right

Code Snippet Library

We're using <figure> and <figcaption> tags to style our images throughout this resource. This isn't the only way to do it, but it's a best practice because it provides the correct semantic structure in the code, and for screen reader users the image and caption are associated with each other. If you don't need a caption, just eliminate the <figcaption> tags.

In the following examples, we use filler text to show you how the image and text will display for that alignment choice. We also provide code to "clear" the image because without it, the content you want below the image will be beside it.

Left-Aligned Image

Left-Aligned Image Code

<figure style="float: left; margin-left: 0; width: 30%;"><img src="Image Source URL" alt="descriptive text" width="100%"  />
<figcaption>Image caption text</figcaption>
</figure>

The width is defined in the <figure> tag, and you can adjust it. Using a percentage to define the width allows the image to resize.

Right-Aligned Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Right-Aligned Image Code

<figure style="float: right; margin-right: 0; width: 30%;"><img src="Image Source URL" alt="descriptive text" width="100%" />
<figcaption>Image caption text</figcaption>
</figure>

The width is defined in the <figure> tag, and you can adjust it. Using a percentage to define the width allows the image to resize.

Clearing Content

When aligning an image with text, you'll need to clear content after the image by using

<p style="clear: right;" > for right-aligned images,
<p style="clear: left;" > for left-aligned images, and
<p style="clear: both;" > for either situation.

In our example, we use a <p> tag, but the clear code can also be added to a <div> or <h> tag, or whatever element is below the image.

See this documentation from Mozilla to learn more: Mozilla info on clears Links to an external site..

Best Practice: Add Alt Text to Images

Don't forget to add meaningful, concise alt text to informative images Links to an external site.. The alt text serves as a replacement for the image if it fails to load or is read by a screen reader. It should not be the same as the image caption but should instead describe the information contained in the image so that someone can understand it even if they can't see it.