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

Look at almost any web page today and you will see a combination of text and images making up the bulk of those pages. It is very easy to add text and images to a page. The text is coded using standard HTML tags like paragraphs, lists, and headings, while the images are included using the <img> element.

The ability to make that text and those images work well together is what sets great web designers apart!  You don't just want your text and images to appear one after another, which is how these block-level elements will layout by default. No, you want some control over how the text and images flow together in what will ultimately be your website's visual design.

Having an image that is aligned to the left side of a page while the text of that page flows around it is a common design treatment for printed design and also for web pages. 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.) Let's take a look at how to achieve this visual effect.

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. This is 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. This needs to 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 class value of "main-content".

<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 sceario, 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 clearly 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 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.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 4/3/17.