How to Wrap Text Around an Image

icon1 Posted by Rochelle in How To... on 03 31st, 2008 | 3 responses

Someone asked me how to get text to wrap around images so I decided it would make a good post. What this person wants to do is the following:

This is a picture that I included just have a picture here. I’m writing now just to take up space so you can see what text looks like that wraps around an image. In this case the image is aligned to the left of the screen and the text is going around it to the right. So now you can see what wrapped text looks like. I am still rambling just to get a bit more text into this paragraph. That is the end of this rambling text.

You can do the above text wrapping by adding some code to your image. The instructions below can be used in your niche stores or on any site you may have. In other words, these instructions are not specific to Build A Niche Store (BANS).

 

My instructions to wrap text around an image:

Step One
 Add your image to where ever you want the image to be visible.
  
 If you want to add an image to a page on your BANS site then navigate to that page and click the < > symbols in the Page Content section so you can add HTML to the page (this is applicable to BANS v2 and higher).
  
 Note: Your HTML code will look something like:
 
<img src="http://www.URLWhereImageIsLocated.com/Image.jpg">
 Please be aware that there are many variations on this so your code may have additional information that I didn’t include here. Regardless of any additional code that may be added it will always have the above code.
Step Two
 Add the following to your code to wrap the text:
 
  • Image is aligned to the left and the text wraps on the right of the image: add align="left" before the closing tag >
  • Image is aligned to the right and the text wraps on the left of the image: add align="right" before the closing tag >
  
 Note: For images aligned to the left your HTML code will look something like:
 
<img src="http://www.URLWhereImageIsLocated.com/Image.jpg" align="left">
  For images aligned to the right your HTML code will look something like:
 
<img src="http://www.URLWhereImageIsLocated.com/Image.jpg" align="right">
.
 That’s all there is to it, but there is more than can be done. The above example will have the text practically bumping into the image. If you prefer to add a little space between the image and text then add the following code before the align tag:
 
hspace="10"
  
 Note: For images aligned to the left your HTML code will look something like:
 
<img src="http://www.URLWhereImageIsLocated.com/Image.jpg" hspace="10" align="left">
  For images aligned to the right your HTML code will look something like:
 
<img src="http://www.URLWhereImageIsLocated.com/Image.jpg" hspace="10" align="right">
  
 You can change the value from 10 to whatever you prefer. Play around with different numbers until you are happy with the results.
 

Rochelle

3 Responses to “How to Wrap Text Around an Image”

  1. Mark Hansen says:
    March 31, 2008 at 11:54 am

    Good Post Rochelle!!

    Just to add to it a bit… if you include your height and width attributes, the page will also load quicker as the layout and size of the image will be in place onload.

    Directly inline with what you posted, you just add:

    height=109 width=502>

    Before your end tag “>”

    Mark

  2. Suzanne says:
    June 15, 2008 at 8:57 pm

    Rochelle ~ This is a very helpful post and really explains it perfectly.

    Mark ~ I’ve always wondered why sometimes the height and width are added in there and sometimes not … that is good to know ;)

    *SmiLes* Suzanne

  3. Chuck Anthony says:
    July 15, 2008 at 7:05 pm

    Thanks R & M… I used hspace=”10″ in my example. I appreciate the info here!

    Chuck Anthonys last blog post..Creating BANS Content Pages To Promote Related ClickBank Products

Leave a Reply