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

Any help would be much appreciated. Thankyou.

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

Any help would be much appreciated. Thankyou.

• javascript
• jquery
• html
• iframe

5 Answers 5

I have a couple of remendations 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./video/99496559" width="250" height="150" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    <p><a href="http://vimeo./99496559"><b>Daniel talks about the Austplan model</b></a>.</p>
  </div>

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

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

just use css and code the iframes inline-block

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

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./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./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./99579066'>WHO IS DANIEL RENNEBERG?</a>.</p>
</div>

Put the 3 iframes into a table:

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

try using :

style="display:inline"

it should work.