HTML: How to Wrap Text Around an Image

Written by sara williams
  • Share
  • Tweet
  • Share
  • Pin
  • Email
HTML: How to Wrap Text Around an Image
Use CSS floats to align images and wrap text around them. (Thinkstock Images/Comstock/Getty Images)

Since HTML 4.01, Cascading Style Sheet (CSS) code is used to define an image tag's alignment. Web designers use the "float" rule in CSS to align any HTML element -- text, images and other content -- to the right or left of a page. Any adjacent element on the page will wrap around the floated element. In this case, text wraps around a floated image. Use more CSS code to define an image's margins, borders and other formatting options.

Skill level:


  1. 1

    Open your HTML file in a plain-text or code editing program and find the text you want to wrap around the image. The image's code should go above the text, and do not place the image code between any text tags. Place the following code to add an image:

    <img src="your-image.gif" class="wrapped" />

    Change "your-image.gif" to the web address of your image. Use only the file's name if the file exists in the same folder as the HTML file to which you are adding the image. Change "wrapped" to whatever class name you like; professionals prefer to use meaningful names.

  2. 2

    Edit your HTML file's CSS code to align the image. If your web page uses a linked CSS file, open that file and add the code there. If your web page uses <style> and </style> tags, then add the necessary code between those tags. Add <style> and </style> between the <head> and </head> tag's of the HTML file if it does not link to a CSS file and does not yet contain <style> tags. The code to float an image is as follows:

    img.wrapped {float: left;}

    Change "left" to "right" if you want to align the image to the right. Change "wrapped" to the class you set in the <img> tag.

  3. 3

    Add margins and other formatting to the image by adding more style rules to your CSS code. Margins add space around the image and will keep it from bumping into the wrapped text. The following is some example code:

    img.wrapped {

    float: left;

    margin: 5px;

    border: 1px solid black;


    Change the number after "margin" to adjust the margin size in that code. The margins here are defined by pixels; this image has a five-pixel margin on all sides.

Tips and warnings

  • Avoid the use of HTML alignment attributes. Text does not wrap around tags that use these attributes, or it does so in unpredictable ways.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.