Pictures beside text


One picture beside paragraph

Add your IMG tag before the paragraph starts (after H2 if you have one) and add the following attributes inside the IMG tag...

  • width = "200" (start with this amount, then increase up to 250 or decrease down to "150" as needed to suit your amount of text)
  • align = "left" or "right"
  • border = "1" or "2"
  • spacing (as needed)
    • hspace = "10" (horizontal space between text and picture)
    • vpsace = "5" or "10" (vertical space between text & picture)

Left or Right

Spacing

You can have a picture starting a little into a paragraph and going into a list...

... but then you will have to add hspace and vspace as well.

2 pics close but not overlapping

If you want to have 2 pictures to the left or right, you can move the IMG tags around in the code, even in the middle of text. Just experiment with where the second IMG tag is and move it up/down until it looks good on your page...

One picture beside list

Add your IMG tag before the list starts (before the list intro). It depends on how long of a list you have. You can also add the IMG tag just before the opening UL or the first LI (or you can move the IMG tag later).  


  • width = "200" (start with this amount, then increase up to 250 or decrease down to "150" as needed to suit your amount of text)
  • align = "right"
  • border = "1" or "2"
  • spacing (as needed):
    • hspace = "10" (horizontal space between text and picture)
    • vpsace = "5" or "10" (vertical space between text & picture)

You can see in my example above that the picture is going into the next section of text. So the best fix is to reduce the width of the picture. if that still doesn't solve it, move the IMG tag up into the paragraph.

Two pictures beside text

Add your IMG tag before the paragraph/list starts and add the following attributes inside the IMG tag...

  • height (instead of width) = "200" (start with this amount, then increase/decrease as needed so it fits nicely with your text)
  • align = "right"
  • border = "1" or "2"
  • no spacing 
  • order of the pictures:
    • 1st picture IMG tag = picture on the left
    • 2nd picture IMG tag = picture on the right