Setting Amazon Link Boxes Inside Posts

I finally took some time tonight to try and figure out how to correctly set those little Amazon "Buy Now" boxes inside a post, so they float various places in the text. I tried to find this information somewhere on the web, but I had no luck at all. The following is a step-by-step explanation how I got this done.

Here is a typical chunk of box link code from Amazon:

<iframe src="http:URL&CodingFromAmazon" style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

I've removed the long link for brevity's sake, but the key part is the style command. As it stands now the link will block out all kinds of text in your post and generally look crappy. Below is a screenshot of the above code set in a post.



Ugly. We want the text to flow around the picture, but it doesn't. To fix this, we'll add a the following code (in red here for easy viewing) to the style line:

<iframe src="http:URL&CodingFromAmazon" style="width: 120px; height: 240px; float: left;" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>


This allows the text to wrap around the right side of the box:



It's still not perfect however, as the text is too close to the box. To fix this, we'll add a margin command to the style line:


<iframe src="http:URL&CodingFromAmazon" style="width: 120px; height: 240px; float: left; margin: 5pt;" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe>

This adds five points of space around the box. Much prettier!


Alternatively, you can float things to the right by changing the word "left" to "right". That's actually what I was trying to do all along. Here is the final page on my action movie review site with the Amazon box set exactly how I want it:

Kaboom Predator Review

I hope this helps make it easier for some people to accomplish this. Keep in mind that I am very much a hack when it comes to things like this. If you know a better way, I'm all ears.