How to Move Text Around an Image With HTML or CSS
By Brandy Alexander
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.
References
Writer Bio
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.