How to put two iframes side by side

Question

I have tried several codes, like this one:

<div class="box"><iframe src="https://embed.spotify.com/?uri=spotify:user:1290230929:playlist:6nTIVNGZfnZ4urUiwHIgpT" 
                         frameborder="0" 
                         scrolling="no" 
                         width="100%" 
                         height="512" 
                         align="left"> </iframe> </div>
<div class="box"><iframe src="https://embed.spotify.com/?uri=spotify:user:1285279066:playlist:56KI83cMiMTOocIdXq2R5j" 
                         frameborder="0" 
                         scrolling="no" 
                         width="100%" 
                         height="512" 
                         align="right">
    </iframe>

And it does not work side by side, if someone can fix this for me, thank you.

Answer 1

Here is an example of a left and right iframes.

CSS
.menu {
  float:left;
  width:33%;
  height:1250px;
  border:none;
}
.mainContent {
  float:left;
  width:65%;
  height:1250px;
  border:none;
}

index.html
<iframe id="choices" class="menu" name="choices" src="choices.html"></iframe>
<iframe id="main" class="mainContent" name="main" src="main.html"></iframe>

Answer 2

Here is a solution using float and divs

HTML:

<div class="box">
  <iframe src="https://embed.spotify.com/?uri=spotify:user:1290230929:playlist:6nTIVNGZfnZ4urUiwHIgpT" frameborder="0" scrolling="no" width="100%" height="512" align="left"> </iframe>
</div>

<div class="box">
  <iframe src="https://embed.spotify.com/?uri=spotify:user:1285279066:playlist:56KI83cMiMTOocIdXq2R5j" frameborder="0" scrolling="no" width="100%" height="512" align="right"></iframe>
</div>

CSS:

.box{
    float:left;
    margin-right:20px;
}
.clear{
    clear:both;
}

http://jsfiddle.net/E5WFT/

Answer 3

It can't work where width is 100%, as that states that the width of the iframe is 100% of the body. Also, don't use inline styles where possible as many of them are or will be deprecated.

Answer 4

1. Remove width="100%" from the iframes.

2. Change align="right" to align="left" on the second iframe if you want them completely side-by-side.

3. Add this CSS:

.box { display:inline-block; }

DEMO

Answer 5

Problems are here :

Why width 100% ? and why in div ? ( this way , they will never be side by side :-))

Try this :

http://jsbin.com/hirirazu/3/edit