How to move text around an image with HTML or css

Written by brandy alexander
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to move text around an image with HTML or css
(Thinkstock/Comstock/Getty Images)

When you include a picture with the text on your Web page, the default style displays the graphic above or below surrounding content, leaving white space to the left and right of the image. This wastes space and makes the picture appear disjointed from your text. To fix this, you have the option to use either Hypertext Markup Language (HTML) or Cascading Style Sheets (CSS) to specify the positioning of the image so that the text wraps around the borders of the picture. Use HTML or CSS to move text around your images, as you prefer.

Skill level:


  1. 1

    Launch the page file in your computer's text editor program and position your cursor inside the "<img>" tag. Type "align=" and follow this with quotation marks like so:

    <img src="image.jpg" align=" " />

  2. 2

    Enter "right," "left," "middle," "top" or "bottom" after the align entry to specify where your picture appears in relation to your text. A "top" alignment makes your content appear at the highest point of your image, the "middle" moves the text to the middle of the photo and the "bottom" directs the content to start at the bottom of the graphic. Additionally, a "right" position, moves your data to the left of the picture and a "left" alignment places content to the right of the image. Type your code as follows:

    <img src="image.jpg" align="top" />

  3. 3

    Save the file.

  1. 1

    Place your cursor inside the "<img>" tag and type "style=" with a set of quotation marks before the last angle bracket. To illustrate:

    <img src="image.jpg" style=" " />

  2. 2

    Enter "float:" inside the quotation marks and type the "left" or "right" attribute to name the alignment of the graphic. The "left" value makes your picture appear on the left and moves your text to the right, while the "right" attribute does the opposite. For example:

    <img src="image.jpg" style="float:right" />

  3. 3

    Save your document.

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.