How to Move Text Around an Image With HTML or CSS

by Brandy Alexander
Move Text Around an Image With HTML or CSS

Move Text Around an Image With HTML or CSS

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.

HTML

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=" " />

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" />

Save the file.

CSS

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=" " />

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" />

Save your document.

About the Author

Brandy Alexander has been writing professionally since 2001. She is a glass artist with a Web design and technical writing background. Alexander runs her own art-glass business and has been a contributor to "Glass Line Magazine" as well as various online publications.

Photo Credits

  • photo_camera Thinkstock Images/Comstock/Getty Images