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.
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/
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
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
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.
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>
Related
Can anyone say why this is wrong? I thought the yellow div would be across the whole page like the pink div. But when I look at it - no, the yellow div lines up under the image not the whole length.
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style=width:100%;background:red>
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style=width:100%;background:yellow>
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
( https://silib2.net/eResources/scripts/carousel/form.htm )
It is probably something stupid?
Please Try This:-
<div style=width:100%;background:pink>
fjadlskjfdsf dslkfsda sdjkfh
</div>
<div style="width:100%;background:red; clear: both; overflow: hidden;">
<div style=width:60%;float:left>
<img src=Library_left.jpg width=100%>
</div>
<div style=width:40%;float:right>
<iFrame scrolling="no" frameborder="0" width="100%" height="100%" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iFrame>
</div>
</div>
<div style="width:100%;background:yellow; clear: both; overflow: hidden;">
<h1 style=text-align:center>adslkjfasdlkjf</h1>
why is this div not wider?
</div>
Static Height to Iframe May solve your issue
<iframe scrolling="no" frameborder="0" width="100%" height="165px" src="https://silib2.net/eResources/scripts/carousel/carousel.php"> </iframe>
You need to give your iframe a smaller height which would be approximately
height: 225px;
And you need to give the div that wraps it [one with red background on it]
clear:both; Overflow:hidden;
This is what i have, not sure why its not showing side by side. I've tried using float left, and tried using the bootstrap grid with no success. Thank you.
<div class="container">
<img src="placeholder" alt="picture of the band " width="500" height="300">
</div>
<div class="container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/placeholder" frameborder="0" allowfullscreen></iframe>
</div>
I just use this . It works.
.container{
float: left;
}
If you are using bootstrap replace container with any other class name and do float:left it works.
<style>
.classname{
float: left;
}
</style>
<div class="classname">
<img src="placeholder" alt="picture of the band " width="500" height="300">
</div>
<div class="classname">
<iframe width="560" height="315" src="https://www.youtube.com/embed/placeholder" frameborder="0" allowfullscreen></iframe>
</div>
whats wrong with this code? i cannot vertically center it using any style. I want it to use style attribut instead of modifying css.
<iframe src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/KOMPAScom&layout=button" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:47px; height:20px"></iframe>
heres when i try style attribut:
<iframe style="display: inline-block; vertical-align: middle;" src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/feednews.id&layout=button" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:47px; height:20px"></iframe>
<div id="d" style="position:relative;width:500px;height:500px;border:solid blue;">
<iframe style="position:relative;top:50%;left:50%;transform:translate(-50%,-50%);border:solid red;" src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/feednews.id&layout=button" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden" id="fb"></iframe>
</div>
Wrap the iframe in a div and set the style with text-align:center.
<div style="width:100%;text-align:center">
<iframe src="about:blank" style="border:none; overflow:hidden; width:47px; height:20px;"></iframe>
</div>
Note that you also have two style statements in the same element. Only one of those will be taken into consideration.
I am trying to sit 2 iframes side by side and have them both in the center of a page. The DIV that surrounds them has all text etc in central but the iframes sit either left or right based on the align tag but not in the middle.
HTML:
<div class="box">
<iframe src="iframe content" width="64" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" align="left">
</iframe>
</div>
<div class="box">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="iframe content" style="height:20px;" align="right">
</iframe>
</div>
CSS:
.box iframe{
display:inline-block;
}
.clear{
clear:both;
}
You can add
.box{ text-align:center;}
for iframe you can use float left as well. or else even display: inline-block is fine as well.
I have a iframe on my page. I have inserted a background image on it. but its not showing the Image. Here is my code.
<iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%" style="background-image:url(img/bg2.jpg)"> </iframe>
Try this:
<iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%;background-image:url(img/bg2.jpg)"> </iframe>
if it doesn't work move the background images to the container of the iframe.
Wrap your iframe with div and put it some class.
Ex:
<div class="wrap">
<iframe style="display:none" width="325" height="276" frameborder="0" scrolling="auto"></iframe>
</div>
in css:
.wrap{background:url(somepicture);}
.wrap iframe{opacity:0;}
Try this .. it should work(tested in IE/Firefox/Google Crome)
<div><img src="a.JPG"></div>
<div>
<iframe style="display:none" width="325" height="276" frameborder="0" scrolling="auto"></iframe>
</div>