How to Wrap Text Around an Image

This article explains how to use CSS to place your images on a page and then wrap the text around them.

How to Use CSS to Make Text Flow Around an Image

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. 

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.

2. For styling purposes, you can also add a class to an image. This class value is what we will use in our CSS file. Note that the value we use here is arbitrary, although, for this particular style, we tend to use values of "left" or "right", depending on which way we want our image to align. We 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.

   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 {
   

   Read More

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

   By Jennifer Kyrnin

    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. We also added some padding values so that this text would not but directly up against the image. Instead, it will have some nice spacing that will be visually attractive in the page's design. In the CSS shorthand for padding, we 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 to 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.

4. 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".

5. 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).

6. Finally, you would change the value of the image's class from "left" to "right" in your HTML:

7. Look at your page in the browser now and your image should be aligned to the right with text neatly wrapping around it. We tend to add both of these styles, "left" and "right" to all our stylesheets so that we can use these visual styles as needed when we are creating web pages. These two styles become nice, reusable features that we can turn to whenever we need to style images with text wrapping around them.

Use 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.

HTML Tags vs. CSS Styles

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 element.

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).