How to Wrap Website Content Around Amazon Text+Image

Having an Amazon Image in a space between two blocks of text is not always ideal. This leaves a considerable amount of blank space that could be better used by wrapping text around the image.

I have prepared some screenshots that will show you how to better design your website pages or posts promoting Amazon Text+Image ads.

When working through this process on your website, do not judge your results until you have updated your screen and clicked on 'View Post'.

To start the process of including an Amazon image in your post, you need to write the content prior to inserting the image. When you are happy with your written content, then insert the image.

To insert the image you will be working in 'Text' on your WordPress screen which is where the html code is.

• You will see the code of your written content, then.....
• Place your cursor immediately beside the first letter of the written content.
  Looking at the image below, the cursor was placed on the left hand side of the letter 'W' Of course, there is not space for the image code, so it will appear above the content html.

The first screenshot shows an Amazon image with text wrapped around it. As you can see, this is not very attractive because of the text being so close to the image.

So even though this is not attractive, I need to show you how to wrap the text around the image.

The code for this image starts with <iframe style="width: and ends with </div>

To wrap the code enter <div style="float: left;"> immediately before <iframe style= so it looks like this <div style="float: left;"><iframe style="width:.............</div> This can be seen in the second screenshot below.

To create the white space we alter the style width by changing the number of pixels.The original number of pixels were 120px;

• In this image Arrow 1 points to the code used to wrap the text (described above).
• Arrow 2 points to the pixel width which I changed from 120px to 150px
  
• Arrow 3 points to the code you need to insert - </div> (explained above)
• Note: The style width can be changed to whatever number you choose.

In this image you can see space/margin between the image and the text.

If there is anything you need help with when doing this process, please let me know by sending a PM.