How To Wrap Text Around an Image

Using CSS to style text content to flow around images in a webpage

Text wrapping around an image
Use CSS to wrap text around a left or right aligned image.

Once you have added an image to your Web page, you might want to have the text flow next to the image, rather than align below it. Technically, there are two ways you can achieve this look, either by using CSS or by adding the visual instructions directly into the HTML.

The correct way to accomplish this visual style is with CSS. Since we are talking about a visual change on the page (making text flow around an image), this means it is the domain of Cascading Style Sheets.

 

Using CSS

  1. Add your image to your Web page. Remember to exclude any visual characteristics (like width and height values) from that HTML. Do be sure to include appropriate alt text. Here is an example of how your HTML code may look:

    <img src="/images/team-photo.jpg" alt="A photo of our employees">
     
  2. You can also add a class to image. This class value is what we will use in our CSS file. Note that the value I use here is arbitrary, although for this particular style, I tend to use values of "left" or "right", depending on which way I want my image to align. 

    <img src="/images/team-photo.jpg" alt="A photo of our employees" class="left">

    By itself, this class value will not do anything. The image will not automatically be aligned to the left of the text. For this, we now need to turn to our CSS file.
     
  3. In your stylesheet, you can now add the following style:

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


    What you did here is use the CSS "float" property, which will pull the image from normal document flow (the way that image would normally display, with the text aligned beneath it) and it will align it to the left side of its container. The text that comes after it in the HTML markup with now wrap around it. I also adding some padding values so that this text would not but directly up against the image. In that CSS shorthand for padding, I added 0 values to the top and left side of the image, and 20 pixels to it's left and bottom. Remember, you need to add some padding the right side of a left aligned image. A right aligned image (which we will look at in a moment) would have padding applied to its left side.
     
  1. If you view your webpage in a browser, you should now see that your image is aligned to the left side of the page and the text nicely wraps around it. Another way to say this is that the image is "floated to the left". 
     
  2. If you wanted to change this image to be aligned to the right (like in the photo example that accompanies this article), it would be simple. First, you must make sure that, in addition to the style we just added to our CSS for the class value of "left", we also have one for right-alignment. It would look like this:

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


    You can see that this is nearly identical to the first CSS we wrote. The only difference is the value we use for the "float" property and the padding values we use (adding some to the left side of our image instead of the right).
     
  1. Finally, change the value of the image's class from "left" to "right" in your HTML:

    <img src="/images/team-photo.jpg" alt="A photo of our employees" class="right">
     
  2. Look at your page in the browser now and your image should be aligned to the right with text neatly wrapping around it.  I tend to add both of these styles, "left" and "right" to all my stylesheets so that I can use these visual styles as needed when I am creating webpages.

Using HTML Instead of CSS (and Why You Shouldn't Do This)

Even though it is possible to do wrap text around an image with HTML, web standards dictate that CSS (and the steps presented above) is the way to go so that we can maintain a separation of structure (HTML) and style (CSS). This is especially important when you consider that, for some devices and layouts, that text may not need to flow around the image. For smaller screens, a responsive website's layout may require that the text does indeed align below the image and that the image stretch the full width of the screen. This is easily done with media queries if your styles are separate from your HTML markup.

Edited by Jeremy Girard