Wrapping Text Around Images
By Stephen Bucaro
The <img> tag is used to display images on a webpage. You can use the img
tag to display images, animated gifs, icons, logos, and buttons, bullets, arrows and
other graphic or navigation elements.
Text Text Text Text  Text Text Text Text
An img tag creates an inline box. This means the the browser renders the image
along with any other inline elements (like text) from left to right, top to bottom.
By default the baseline of the image is placed on the same baseline as the text.
However you can set the align attribute to bottom, middle or top to change where
the baseline of the image will be located relative to the baseline of the text.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
The align attribute is used to control the alignment of the image. The
image above has align="left", while the image below has align="right".
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Note how the text wraps around the image. If you don't like the layout of the
text wrapping, with align="right" you can use the <br clear="right" /> tag
to clear the text wrapping. With align="left" you can use the <br clear="left" />
tag to clear the text wrapping. Or you can use <br clear="all" /> to clear
any previous align setting.
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
In the text and image shown above, after the first paragraph of text, I didn't
want the remaining text to wrap to the left of the image, so between the first
and second paragraphs, I used the <br clear="right" /> tag to clear the
text wrapping.
More HTML Code:
• HTML Special Characters - Character Entities
• Use an Image as a Form Submit Button
• Use HTML Target Attribute to Specify Where to Open Document
• How to Use a Meta Redirect
• Form Input Labels
• Code For a Basic 2-Column Fluid Webpage Layout
• How to Troubleshoot an HTML Table
• How to Code HTML Lists
• HTML5 Nav Element
• Checkbox Basics
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
