CODEWITHSUNDEEP
javascriptjqueryhtmliframe
user3685651
user3685651

Reputation: 11

Multiple iFrames Next To One Another

Hey guys is it possible to have 3 iframes next to one another side by side instead of it going down the page vertically? Here is the iframe code i need put next to one another.

echo("<br /><iframe src='//player.vimeo.com/video/99496559' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99496559'><b>Daniel talks about the Austplan model</b></a>.</p>");
echo("<iframe src='//player.vimeo.com/video/99582077' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99582077'>Peace of mind</a>.</p>");
echo("<iframe src='//player.vimeo.com/video/99579066' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>");

Any help would be much appreciated. Thankyou.

Upvotes: 1

Views: 9480

Answers (5)

semira
semira

Reputation: 341

just put iframes in divs and do like that.

<style>     
      .frame{
      float:left;
      margin:20px;
      }
</style>

<div class="frame">
    <iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99496559'><b>Daniel talks about the Austplan model</b></a>.</p>
</div>

<div class="frame">
    <iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99582077'>Peace of mind</a>.</p>
</div>

<div class="frame">
    <iframe src='a.html' width='250' height='150' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href='http://vimeo.com/99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>
</div>

Upvotes: 1

user4322905
user4322905

Reputation:

just use css and code the iframes inline-block

iframe{
    display:inline-block;
    /* other designs you want*/
}

Upvotes: 1

iDev247
iDev247

Reputation: 1901

I have a couple of recommendations before getting to the answer.

  • First, have a look at this Code Guide. It will allow you to write cleaner code.
  • Second, you don't need to use echo. You can but it will be cleaner without it.

Now for the solution. One way to do it with Use CSS. This is simple example but if you have lots of formatting to do you might want to look at a CSS framework. Something like bootstrap.

The CSS:

.row {
  clear: both;
}

.column-3 {
  float: left;
  width: 30%;
}

The HTML:

<div class="row">
  <div class="column-3">
    <iframe src="//player.vimeo.com/video/99496559" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    <p><a href="http://vimeo.com/99496559"><b>Daniel talks about the Austplan model</b></a>.</p>
  </div>

  <div class="column-3">
    <iframe src="//player.vimeo.com/video/99582077" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <p><a href="http://vimeo.com/99582077">Peace of mind</a>.</p>
  </div>

  <div class="column-3">
    <iframe src="//player.vimeo.com/video/99579066" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <p><a href="http://vimeo.com/99579066">WHO IS DANIEL RENNEBERG?</a>.</p>
  </div>
</div>

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

try using :

style="display:inline"

it should work.

Upvotes: 0

blearn
blearn

Reputation: 1208

Put the 3 iframes into a table:

<table>
<tr>
<td>iframe1</td><td>iframe2</td><td>iframe3</td>
</tr>
</table>

Upvotes: 0

Related Questions