View Full Version : Horizontal or Side-by-side iframes

05-04-2005, 05:05 AM
I can't get my IFrames to sit side by side, they go down the page.
I've tried adjusting the width using percentages as I don't want to use a fixed width (but will if I have to)

Is there any other way than using a table?

the solution needs to be compatible for both Firefox and IE (latest versions)


05-04-2005, 05:10 AM
<iframe style="display:inline"></iframe><iframe style="display:inline"></iframe>

Should work (along with whatever other attributes you want to give them) as long as they are not too wide to fit.

05-04-2005, 05:19 AM
What's too wide to fit?

I'm using percentages as the width (is that legal?) so it should just take up whatever width is available?
ie. width=30% and %70
This works in IE, but not in FF.(latest versions)


05-04-2005, 05:23 AM
Try 28% and 68%, or even slightly less, to allow for the fuzzy math of Mozilla.

Also, a link to the page or its code would help.

I just did an experiment and 29.9% with 70% for the other was good for blank iframes.

07-01-2010, 10:04 PM
I tried your suggestion but obviously I'm not doing it correctly, because it didn't work.

I have 3 iframes for Amazon ads:

<iframe src="http://rcm.amazon.com/e/cm?t=livercom-20&o=1&p=8&l=as1&asins=0969527225&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>

<iframe src="http://rcm.amazon.com/e/cm?t=livercom-20&o=1&p=8&l=as1&asins=0969527217&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>

<iframe src="http://rcm.amazon.com/e/cm?t=livercom-20&o=1&p=8&l=as1&asins=3981050215&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>

They already use style= so I suppose there is a conflict when I add another style, but I don't know the syntax of the code for using 2 styles.

Here's the url: http://www.livercancercurenow.com/category/the-budwig-protocol/

Thanks for helping a newbie!


07-02-2010, 02:19 AM
Your 'problem' is the br tag (whose function is pretty much solely to create a line break) -

The first iframe is followed by 4 br tags (from your source code):

<br />
<br /></br><br />

So is the second. The third has only 3:

<br />
<br /></br>

The third one doesn't really matter in this case though, you want a line break there.

Different browsers will treat this differently. All will give at least one line break if there are one or more br tags. Some may in some cases give more than one line break when there is more than one.

In any case, getting rid of the 8 br tags which follow the first two iframes (4 apiece), will cause all three iframes to line up horizontally, which I believe is what you are after.

08-03-2010, 04:44 AM
Wow, I happened to come back to this post a month later, and here's my answer.

It worked beautifully. :D

Thanks very much, John!


New user
08-30-2014, 04:55 PM
Hi, I am like my username says, a New user. Im having this same problem... Im trying to put two iframes side by side but what ever i try it does not work. When i do get them side by side the image does not show. all i see is two empty frames. Im using wordpress. I would be very happy for a good idea. all the best, Jenny

08-30-2014, 06:48 PM
Please post a link to the page on your site that shows the problem situation.