“Floating” iframes – How do you do it?

I’m going to use this Amazon ad as an example, but iframes can encase almost anything including photo galleries and YouTube videos. 

Are you linking amazon ad’s and wondering how the heck you “wrap” your text around the ad like I’m currently doing? Well, this guide will outline the EASIEST way to do this without editing any CSS files and/or adding <div> elements.

First off, the code amazon gives you for this type of ad should look something similar to this:

<iframe src=”http://rcm-na.amazon-adsystem.com/e/cm?t=bestmma-20&o=15&p=8&l=as1&asins=B00E1AKKT6&ref=tf_til&fc1=000000&IS2=1&lt1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr” style=”width:120px;height:240px;” scrolling=”no” marginwidth=”0″ marginheight=”0″ frameborder=”0″></iframe>

When that same code is pasted into the “text” tab of WordPress’ page or post editor (or any CMS’ editor) it will change to something more similar to :

<iframe style=”width: 120px; height: 240px;” src=”http://rcm-na.amazon-adsystem.com/e/cm?t=bestmma-20&amp;o=15&amp;p=8&amp;l=as1&amp;asins=B00E1AKKT6&amp;ref=tf_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr” height=”240″ width=”320″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”></iframe>

With this generic code, your ad’s will inherit the “align-none” element without anything else being defined. This means that your text will not wrap around the ad.

However, changing this is extremely easy! Simply add the highlighted code below, and your ad will wrap itself in a blanket of words just as my Playstation 4 ad has!

<iframe style=”float: left; width: 120px; height: 240px;” src=”http://rcm-na.amazon-adsystem.com/e/cm?t=bestmma-20&amp;o=15&amp;p=8&amp;l=as1&amp;asins=B00E1AKKT6&amp;ref=tf_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=000000&amp;bg1=FFFFFF&amp;f=ifr” height=”240″ width=”320″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”></iframe>

Just remember, you can add this element anywhere in the  <iframe style=”” section, it doesn’t have to be at the start like mine is, it just makes it easier to distinguish. You could hypothetically put it in the middle or at the end. Just keep in mind that you cannot have a space between the ” and the elements. The same way, you must have a space after ALL semi-colons, which separate elements, the only exception to this rule is at the end of a string of elements.