Learn how to wrap text around an image in HTML! Follow these methods using CSS or HTML attributes to position images and flow text around them.

There are a few ways to wrap text around an image in HTML. Here are three common methods:

Method 1: Using the “float” property to wrap text around an image in HTML

This method involves using the “float” property in CSS to position the image to the left or right of the text.

Here’s an example code:


<div>
  <img src="image.jpg" style="float: left; margin-right: 10px;">
  <p>how to wrap text around image in html?</p>
</div>

In this example, the image is floated to the left with a margin of 10 pixels to the right.

The text then flows around the image to fill the remaining space.

how to wrap text in html

wrap text around an image in HTML using the “float” property

You can also float the image to the right by changing “float: left” to “float: right”.

Method 2: Using the “align” attribute

This method involves using the “align” attribute in the HTML “img” tag to specify the alignment of the image.

Here’s an example code for how to wrap text in HTML:


<div>
  <img src="image.jpg" align="left" hspace="10">
  <p>how to make text wrap around an image in html</p>
</div>

In this example, the “align” attribute is set to “left” to align the image to the left of the text.

The “hspace” attribute is also used to add a margin of 10 pixels to the right of the image.

An image on left which is wrapped by text on the right html example

how to make text wrap around an image in html using the “align” attribute

You can also align the image to the right by changing “align=”left” to “align=”right”.

Method 3: Using CSS “shape-outside” property

This method involves using the CSS “shape-outside” property to wrap the text around the image.

wrap the text around the image using css

Using css property to wrap the text around image

Here’s an example code:


<style>
  .image {
    float: left;
    margin-right: 10px;
    width: 200px;
    height: 200px;
    shape-outside: url(image.jpg);
    shape-margin: 10px;
  }
</style>

<div>
  <img src="image.jpg" class="image">
  <p>how to wrap text in html</p>
</div>

In this example, the “shape-outside” property is used to create a non-rectangular shape around the image.

The “shape-margin” property is used to add a margin between the text and the shape.

This method requires a bit more CSS knowledge and is not supported in older browsers.

Note: It is always best to use CSS to style your HTML elements, rather than using inline styles as shown in the above examples. It is also important to ensure that your HTML and CSS code is valid and well-formed.

I hope this helps to make text wrap around an image in HTML.

You might want to check out HTML help. Let us know if you have any questions regarding “how to wrap text in HTML around an image”.