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

A block-level element in an HTML document (e.g. a webpage) appears in sequential order. To modify the order to make the page look more appealing or to improve its usefulness you'll need to wrap blocks, including images, so that the text of that page flows around it.

In web terms, this effect is known as "floating" the image. This style is achieved with the CSS property for "float." This property allows text to flow around the left-aligned image to its right side. Or around a right-aligned image to its left side.

The first thing you will need to do is have some HTML to work with. For our example, we will write a paragraph of text and add an image at the beginning of the paragraph (before the text, but after the opening <p> tag). Here is what that HTML markup looks like:

<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 would likely be about the person whom the headshot is for. </p>

By default, our webpage 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. We will change this default look by turning to CSS. First, however, we will add a class value to our image element. That class will act as a "hook" that we will use in our CSS later.

<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 would likely be about the person whom the headshot is for.</p>

Note that this class of "left" does nothing at all on its own. For us to achieve our desired style, we need to use CSS next.

With our HTML in place (including our class attribute of "left") we can now turn to CSS. We would add a rule to our stylesheet that would float that image and also add a little padding next to it so that the text that will ultimately wrap around the image does not butt up against it too closely. Here is the CSS you may write:

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

This style floats that image to the left and adds a little padding (using some CSS shorthand) to the right and bottom of the image.

If you reviewed the page that contains this HTML in a browser, the image would now be aligned to the left and the text of the paragraph would appear to its right with an appropriate amount of spacing between the two. Note the class value of "left" that we used is arbitrary. We could've called it anything because the term "left" does nothing on its own. Whatever term you use must have a class attribute in the HTML that works with an actual CSS style that dictates the visual changes you are looking to make.

This approach of giving the image element a class attribute and then using a general CSS style that floats the element is only one way you could accomplish this "left aligned image" look. You could also take the class value off of the image and style it with CSS by writing a more specific selector. For instance, let's look at an example where that 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 would likely be about the person whom the headshot is for.</p>
</div>

To style this image, you could write this CSS:

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

In this scenario, our image would be aligned to the left, with the text floating around it like before, but we did not need to add an extra class value to our markup. Doing this at scale can help create a smaller HTML file, which will be easier to manage and can also help improve performance.

Finally, you could even add the styles directly into your HTML markup, like this:

<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 would likely be about the person whom the headshot is for.</p>

This method is called "inline styles." It is not advisable because it combines the style of an element with its structural markup. Web best practices dictate that the style and structure of a page should remain separate. This segregation is especially helpful when your page needs to change its layout and look for different screen sizes and devices with a responsive website.

Having the style of the page intertwined in the HTML will make it much more difficult to author media queries that will adjust your site's look as needed for those different screens.