HTML Code to Wrap Text Around Image

By 2 months ago

Are you looking for the code to wrap text around an image? Normally, when you create an HTML page, everything goes in a straight line, with one block following the other. Text, then picture, then text, etc., is an example of this in all of my prior blogs.

You might wish to put text adjacent to an image rather than underneath it. Wrapping words around an image is what it’s called. Wrapping text in HTML is actually rather simple. It’s worth noting that you don’t have to use CSS to wrap text.

However, the W3C now advises that these activities be done with CSS rather than HTML. I’ll go through both ways in detail below, but if you have the option, CSS is preferable because it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

Using CSS to wrap text around an image is a better option. It allows you more fine-grained control over element positioning and is more compatible with recent coding standards.

Even though I inserted CSS straight in the image tag in the HTML example, this is something you should never do. Instead, you should keep all of your CSS code in a separate file called a stylesheet.

You simply provide the IMG tag a class and a name in the IMG tag. I named the class left in my example. All I have to do now is add the following code to my stylesheet:

float: left; padding: 0 10px 0 0;.left float: left; padding: 0 10px 0 0;
As you can see, I padded the right side of the left-aligned image by 10px.

Share
asktechnicians

Recent Posts

By
asktechnicians
2 months ago
By
asktechnicians
2 months ago
By
asktechnicians
2 months ago
By
asktechnicians
2 months ago