Internet, Networking, & Security Web Development How to Wrap Text Around an Image by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on July 05, 2019 Mykyta Dolmatov / Getty Images Web Development CSS & HTML Web Design SQL Tweet Share Email 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> 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). Using CSS 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. 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 e 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. <img src="/images/team-photo.jpg" alt="A photo of our employees" class=& 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. In your stylesheet, you can now add the following style: paddin 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. 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". 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: paddin 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). 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= 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. 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.