How to Float an Image to the Left of Text on a Webpage

Block-level elements in a web page appear in sequential order. To improve the page's appearance or usefulness, you can modify that order by wrapping blocks, including images, so that text flows around images.

In web design terms, this effect is known as floating the image. This is achieved with the CSS property float, which allows text to flow around the left-aligned image to its right side (or around a right-aligned image to its left side.

This example adds an image at the beginning of a paragraph (before the text, but after the opening <p> tag). Here's the initial HTML markup:

<p><img src="images/headshot-picture.jpg" alt="Headshot photo">The text of the paragraph goes here. In this example, we have an image of a headshot photo, so this text might describe the person in the headshot. </p>

By default, the page would display with the image above the text, because images are block-level elements in HTML. This means that the browser displays line breaks before and after the image element by default. To change this default look using CSS, add a class value (left) to the image element to serve as a hook to which properties can be attached.

<p><img src="images/headshot-picture.jpg" alt="Headshot photo" class="left">The text of the paragraph goes here. In this example, we have an image of a headshot photo, so this text might describe the person in the headshot.</p>

Note that this class does nothing on its own. CSS will achieve the desired style.

Add this rule to the site's stylesheet:

.left {
 float: left;
 padding: 0 20px 20px 0;
}

This style floats anything with the class left to the left of the page and adds a little padding to the right and bottom of the image so that the text doesn't butt right up against it.

In a browser, the image would now be aligned to the left; the text would appear to its right with space between the two.

You could also take the class value off of the image and style it with CSS by writing a more specific selector. In the example below, the image is inside of a division with a main-content class value.

<div class="main-content"> 
<p><img src="images/headshot-picture.jpg" alt="Headshot photo">The text of the paragraph goes here. In this example, we have an image of a headshot photo, so this text might describe the person in the headshot.</p>
</div>

To style this image, write this CSS:

.main-content img { 
 float: left; 
 padding: 0 20px 20px 0;
}

In this scenario, the image is aligned to the left, with the text floating around it as before, but without the extra class value in the markup. Doing this at scale can help create a smaller HTML file, which will be easier to manage and can improve performance.

Finally, you could use inline styles:

<p><img src="images/headshot-picture.jpg" alt="Headshot photo" style="float:left;margin:0 20px 20px 0;">The text of the paragraph goes here. In this example, we have an image of a headshot photo, so this text might describe the person in the headshot.</p>

This is not advisable, however, because it combines the style of an element with its structural markup. Best practices dictate that the style and structure of a page remain separate. This segregation is especially helpful when you need to change the page's layout and look for different screen sizes and devices with a responsive website.