How To Wrap Text Around an Image

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

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How To Wrap Text Around an Image." ThoughtCo, Apr. 3, 2017, thoughtco.com/wrapping-text-around-image-3466530. Kyrnin, Jennifer. (2017, April 3). How To Wrap Text Around an Image. Retrieved from https://www.thoughtco.com/wrapping-text-around-image-3466530 Kyrnin, Jennifer. "How To Wrap Text Around an Image." ThoughtCo. https://www.thoughtco.com/wrapping-text-around-image-3466530 (accessed September 22, 2017).
Text wrapping around an image
Use CSS to wrap text around a left or right aligned image.

Look at any web page and you will see a combination of text content and imagery. Both of these elements are essential ingredients in the success of a website. Text content is what site visitors will read and what search engines will use as part of their ranking algorithms. Images will add visual interest to the site and help accentuate the text content. 

Adding text and images to websites is easy. Text is added with standard HTML tags like paragraphs, headings, and lists, while images are placed on a page with the <img> elememt.

Once you have added an image to your web page, however, you might want to have the text flow next to the image, rather than align below it (which is the default way an image added to HTML code will render in the browser). Technically, there are two ways you can achieve this look, either by using CSS (recommended) or by adding the visual instructions directly into the HTML (not recommended, since you want to maintain the separation of style and structure for your website).

The correct way to change the way a page's text and images layout and how their visual styles appear in the browser is with CSS. Just remember, 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. First, add your image to your web page. Remember to exclude any visual characteristics (like width and height values) from that HTML. This is important, especially for a responsive website where the image size will vary based on the browser. Certain software, like Adobe Dreamweaver, will add width and height information to images that are inserted with that tool, so be sure to remove this information from the HTML code! Do be sure, however, 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">
     
  1. For styling purposes, 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. I find that simple syntax to work well and be easy for others who may have to manage a site in the future to understand, but you could give this any class value you want.

    <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.
     
  1. 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. Inatead, it will have some nice spacing that will be visually attractive in the page's design. In the CSS shorthand for padding, I added 0 values to the top and left side of the image, and 20 pixels to its 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.
     
  2. 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". 
     
  3. 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, you would 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 web pages. These two styles become nice, reusable features that I can turn to whenever I need to style images with text wrapping around them.

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 stretches the full width of the screen. This is easily done with media queries if your styles are separate from your HTML markup. In today's multi-device world, where images and text will appear differently for different visitors and on different screens, this separation is essential to the long term success and management of a web page.

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