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

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 2

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 3

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

Answer 4

Here you go. use float in div this is basic kindly use search before posting next time.

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>

CSS:

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

http://jsfiddle.net/E5WFT/