HTML Code to Wrap Text Around Image

Need the code to wrap text around an image? Normally when you create an HTML page, everything flows linearly, meaning one thing directly after another. All of my previous posts are an example of this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

So here’s how to wrap any text around a picture in HTML:

pc clipart

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 data-original=”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”.

pc clipart

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 data-original=”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 data-original=”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 whitespace to a right-aligned image, you would do this:

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

Fairly simple eh? There may be times when you have to copy and paste text into a field and can use these HTML tags to wrap the text around the image, i.e. filling out forms on MySpace, etc. Enjoy!

More posts from the How-To Category

01Google_Music_Desktop_Player_Website.jpg

Listen to Google Play Music in Windows Without a Web Browser

Changing the rendering engine on a tab

Use Internet Explorer, Firefox, Chrome, and Safari in One Browser – Part II

Rippings DVDs with HandBrake (Mac/Win/Linux)

Easily Encrypt Files and Folders in Windows Using the Context Menu – Part I

Popular Posts This Month

windows defender

Windows Defender vs. Security Essentials vs Safety Scanner

youtube ie11 freezing

How To Fix Flash Crashes in Internet Explorer 11

bitlocker error

Fix “This device can’t use a Trusted Platform Module” When Enabling BitLocker

Comments [6]

  1. Thank You. Very Helpful! I needed that HTML code to make my website look nice!

  2. Sofia says:

    Thanks – sometimes a website gives the answer the first time around. HTML will always get me somehow. Thanks!

    Sofia

  3. Chad Walls - Toronto says:

    Thanks for this post! The code is exactly what I needed and was able to cut and paste it from your post. Being able to add a margin using CSS is also beneficial.

    What if I have multiple paragraphs and want the image beside a specific paragraph? Would I just insert the image tab in front of that particular paragraph?

  4. Maria Nuusiku Hango says:

    This information helped me a lot. Now I can do it.

  5. Mark says:

    I have the same issue as Chad. I have multiple paragraphs that each need a leading image. Every set of image/paragraph needs to be left justified to the page regardless of the size of my paragraph.

  6. Miko T says:

    Why do I get this “![CDATA” in my Google AdSense code when I wrap around text using <div style code? Please Help

Leave a Reply