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.
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.
How do I get an iframe to appear under an image and align to the right? Here's my code.
<img src="images/pc-mag.png" width="500" height="275" align="right">
<iframe width="500" height="400" align="right" src="https://www.youtube.com/embed/9rR5PpHSoIQ" frameborder="0"></iframe>
<h3 class="subHD">SubTitle</h3>
<p>Body paragraph</p>
Thank you for the help. Here's the code that worked.
<div class="FullPage">
<!--container for image and iframe -->
<div style="float:right; margin-left:20px">
<img src="images/pc-mag.png" width="500" height="275" align="right"><br>
<iframe width="500" height="400" align="right" style="margin-top:20px" src="https://www.youtube.com/" frameborder="0"></iframe>
</div>
<img src="../images/Logotype.png" width="190" height="101"/>
<h3>Title</h3>
<p>Body text</p>
</div>
Check this jsfiddle i have wrapped iframe and img inside divs
iframe,img{
float:right;
}
div{
clear:both;
}
There are two image tags, not sure under which image tag you want to align iframe?
Suggestion: You can wrap your iframe in paragraph tag and can align anywhere you want.
For example: <p style="text-align:right;"> <!--here you can add iframe --> </p>
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>