How to Move Text Around an Image With HTML or CSS

By Brandy Alexander

Move Text Around an Image With HTML or CSS
i Thinkstock Images/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.

HTML

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

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:

Save the file.

CSS

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

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:

Save your document.

×