Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

Offering a guide to professional web site design, web page design and web design guidelines

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

Wrapping Text Around an Image within an HTML Web Page


If you've ever tried to display an image with your text wrapping around it, you have probably discovered it won't work with just a plain image tag.

To do so, you must include the ALIGN attribute within your image tag.


Image Displayed on Left:
<IMG BORDER="0" ALIGN="Left" SRC="yourimage.jpg">Your Text
By placing the above code within your HTML, your image will be displayed on the left hand side with your text displayed on the right.

As you continue to type your text, it will automatically format itself to wrap around the right side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. The table's width is set up to span 50% of the page width.

Image Displayed on Right:
<IMG BORDER="0" ALIGN="Right" SRC="yourimage.jpg">Your Text
By placing the above code within your HTML, your image will be displayed on the right hand side with your text displayed on the left.

As you continue to type your text, it will automatically format itself to wrap around the left side and the bottom of your image. This example has been set up with a table to keep the text neatly aligned within a limited amount of space. The table's width is set up to span 50% of the page width.

 More Web Design Tips