Internet, Networking, & Security Web Development How to Float an Image to the Left of Text on a Webpage Use CSS to place your images with precision 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 January 26, 2020 Tweet Share Email Web Development CSS & HTML Web Design SQL Block-level elements in a web page appear in sequential order. To improve the page's appearance or usefulness, you can modify that order by wrapping blocks, including images, so that text flows around images. In web design terms, this effect is known as floating the image. This is achieved with the CSS property float, which allows text to flow around the left-aligned image to its right side (or around a right-aligned image to its left side. Maskot/Getty Images Start With HTML This example adds an image at the beginning of a paragraph (before the text, but after the opening <p> tag). Here's the initial HTML markup: <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 might describe the person in the headshot. </p> By default, the page would display with the image above the text, because images are block-level elements in HTML. This means that the browser displays line breaks before and after the image element by default. To change this default look using CSS, add a class value (left) to the image element to serve as a hook to which properties can be attached. <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 might describe the person in the headshot.</p> Note that this class does nothing on its own. CSS will achieve the desired style. Adding CSS Styles Add this rule to the site's stylesheet: .left { float: left; padding: 0 20px 20px 0;} This style floats anything with the class left to the left of the page and adds a little padding to the right and bottom of the image so that the text doesn't butt right up against it. In a browser, the image would now be aligned to the left; the text would appear to its right with space between the two. The class value .left used here is arbitrary. You can call it anything you choose because it does nothing on its own. Other Ways to Achieve These Styles You could also take the class value off of the image and style it with CSS by writing a more specific selector. In the example below, the image is inside of a division with a main-content class value. <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 might describe the person in the headshot.</p></div> To style this image, write this CSS: .main-content img { float: left; padding: 0 20px 20px 0;} In this scenario, the image is aligned to the left, with the text floating around it as before, but without the extra class value in the markup. Doing this at scale can help create a smaller HTML file, which will be easier to manage and can improve performance. Avoid Inline Styles Finally, you could use inline styles: <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 might describe the person in the headshot.</p> This is not advisable, however, because it combines the style of an element with its structural markup. Best practices dictate that the style and structure of a page remain separate. This segregation is especially helpful when you need to change the page's layout and look for different screen sizes and devices with a responsive website. Intertwining the style of the page with the HTML makes authoring media queries to adjust your site for different screens much more difficult. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Email Address Sign up There was an error. Please try again. You're in! Thanks for signing up. There was an error. Please try again. Thank you for signing up. Tell us why! Other Not enough details Hard to understand Submit