Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Wrapping Text Around Images

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 Image is an inline boxText 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.

Image align attribute set to left

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

Image align attribute set to 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 wrapping canceled by br clear tag

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 Text Tags Basics
• Easy Code to Add Google Site Search to Your Website
• How to Write and Run HTML
• Setting the Number of Items Visible in a Select List
• Make an HTML Element Editable
• HTML center Tag
• How to Troubleshoot an HTML Table
• How to Make a Table Scroll
• How to Use a Meta Redirect
• HTML5 role Attribute

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2018 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268