Handling text wrap around images with HTML and CSS

Text wrapping is the practice of surrounding a picture or diagram with text. Including images in your text is an excellent way to display essential information. HTML and CSS are the two primary methods for achieving this, as they both account for inconsistent image dimensions.

This tutorial will walk you through the two significant ways to wrap text around images—using HTML and CSS.

Sandbox

The completed project is on CodeSandbox. Fork it to get started quickly.

GitHub

The source code is on GitHub.

Prerequisites

To follow the steps in this article, you’ll need:

Basic knowledge of HTML and CSS
An IDE installed on your machine (e.g., VS Code)

Wrapping text around an image using HTML

This HTML method is significant when considering that text may not need to float around the image on various devices and layouts. A responsive website's style may require that the text align below the picture and that the image span the entire width of the screen for smaller displays.

Firstly, in the HTML file, you need to create a container: it can be a table or div that stores a paragraph of text. The picture markup will be just above this content. For instance,

1<!--Image container start-->
2<div class="box">
3  <img src="fam.png" alt="The Forger family picture">
4</div>
5<!--Image container end-->
6    
7<!--Text container start-->
8<div>
9  <p> The family consists of... </p>
10</div>
11<!--Text container end->

The code above displays the picture fam.png just above the text. You would want to position it on the left side of the paragraph to sit within the text. This is accomplished by including a float value within the <img> element. This means you will use inline HTML styling, like so:

1<div>
2  img src="fam.png" alt="The Forger family picture" style="float: left; 
3  margin: 5px;">
4</div>

And now the image will appear in the text like this:

Wrapping text around an image using CSS

This approach is a little more effective for individuals who understand CSS. It provides fine-grained control over element placement and is more compatible with current coding standards. The implementation is similar to the HTML technique, except it uses the <style> tags in the HTML file's <head> tag.

You will need to define a style class for images; you should name your class something simple. How about "wrap"?

1<div class="wrap">
2   <img src="fam.png" alt="The forger family picture">
3</div>

Now, give it the float property with the value "right" within the style> tag at the head. This change aligns the image to the right while your text wraps around it.

1<style>
2 .wrap {
3   float: right; 
4   margin: 5px;
5  }
6</style>

The image in this example floats to the right side of the screen, and the text wraps around it. This solution is more dependable since you can always reuse your class elsewhere in your code, saving you time.

Conclusion

The HTML technique of wrapping text is still dependable, but the CSS method is more adaptable for style-related formatting on your website. Using the CSS method, if you modify the style of the text wrap, all the CSS code will change simultaneously. If this seems beneficial to you, you may want to explore mastering CSS.

Handle Text Wrap Around Images Using HTML and CSS