I'm trying to make iframe responsive inside div, there are plenty of resources on the web on how to do this, but the common solution is not working for my case for YouTube video embeds.
I'm using Skeleton CSS Boilerplate. I have a nested div structure like so:
<div class="container">
<div class="row item">
<div class="six columns">
<iframe> </iframe>
</div>
<div class="six columns">
<iframe> </iframe>
</div>
</div>
</div>
The iframe were protruding outside the right edge of the containing div (class .six.columns) so I tried the following two css strategies (below).
However, with each of these strategies, <iframe> have become huge, and seem to have taken on the width of the .container div (or perhaps the .row div), instead of the immediate parent, the .six.columns div.
div > iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
and
div.six.columns iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
I just want the <iframe> to responsively fit inside the .six.columns div. How can I achieve this?
Set the container to position:relative in order to have the absolute to work.
To maintain the video aspect ratio, wrap the iframe into another div, and use the padding trick. Let's say the video is 16:9, the padding-bottom value would be 9/16=56.25%. Simple demo follows.
https://jsfiddle.net/dfkhkLhp/
.youtube {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.youtube iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
<div class="youtube">
<iframe src="https://www.youtube.com/embed/HkMNOlYcpHg" frameborder="0" allowfullscreen></iframe>
</div>
Related
I would like to know how can i set my footer width to 100%? I tried to set .footer-container and .footer width to 100% as well as absolute position.
Here's the website:
http://buysmartcardsonline.com/
If you moved your div.footer-container outside the div.page container, it should automatically cover the width of the page.
Before:
<div class="page">
...
<div class="footer-container">...</div>
</div>
After:
<div class="page">
...
</div>
<div class="footer-container">...</div>
As #Hubro mentioned in his answer moving the div.footer-container outside the div.page container would be ideal. But if you don't want to move the divs you could try using absolute positioning for the footer like below
.wrapper{
position: relative;
}
.footer-container{
width: 100%;
position: absolute;
left: 0;
bottom: -27px; (height of the footer container)
}
Remove class="footer-container" from class="page" and make it direct child of class="wrapper"
from
to
Try following code - I hope this is what you are looking for
.footer-container {
left: 0px;
width: 100%;
position: fixed;
bottom: 0px;
}
You should place the .footer-container outside the .page and then inside the add a div within the .footer-container with the class of .page to get content within the footer the same width.
<div class="page">Your page content</div>
<div class="footer-container">
<div class="page">
Footer Content
</div>
</div>
Before you read further, I am utilizing the OneByOne Jquery Slider plugin, the plugin content is what I am attempting to snap to the top of its container div. To read more about OneByOne, here is a link: http://codecanyon.net/item/jquery-onebyone-slider-plugin/684613
I am attempting to snap an inside div to the top of its container div, here is my (what I think is anyway), the related CSS:
#banner{
position: absolute;
}
.oneByOne1{
margin-right: auto;
margin-left: auto;
width: 960px;
height: 420px;
position: relative;
overflow: hidden;
}
#banner .oneByOne_item{
position: absolute;
width: 960px;
height: 420px;
overflow: hidden;
display: none;
}
The div I am attempting to snap to the top is the "banner" div, and the container div is "content", but with the OneByOne plugin, it's recognized as the oneByOne div block coded above, here is my relevant HTML:
<div id="content">
<div id="banner">
<div class="oneByOne_item">
<img src="img/storefront.jpg" class="item_1_1" />
</div>
<div class="oneByOne_item">
<img src="img/livemusic.jpg" class="item_1_2" />
</div>
<div class="oneByOne_item">
<img src="img/brokerecord.jpg" class="item_1_3" />
</div>
</div>
</div>
Here is a link to my current site: http://raider.grcc.edu/~ryanduffing/recordstore/
<div class="search_line"> has position:relative and top: -100px. The image inside has a height of 61px, so the div around it does too.
Because you have it positioned relatively, it is still taking up space in the DOM where it naturally would appear, but your top value is "pulling" it up to where it appears visually. Because it's still taking up space in the DOM, it's pushing your #content down the 61px.
I can't see a good reason to leave it how you've done it, so if you can alter it without breaking anything else, I'd recommend changing it to
.main_header .search_line {
position: absolute;
top: 39px;
right: 0;
}
I want to create a content page in jQuery mobile in which I have 2 divs one on top the other within the content area in jquery mobile. The issue is that when the screen size changes the lower div goes on top of the upper div. What I want is that when the screen size changes it maintains the same div structure of one on top the other. I am wondering if I can use a grid but am not sure grids work for 1 column but 2 rows?
My code is below:
CSS
#songName {
text-align:center;
width: 100%;
height: 20px;
}
#songPicture {
text-align:center;
width: 100%;
height: 50%;
}
HTML
<div data-role="content" style="height: 100%">
<div id="songName"></div>
<div id="songPicture"></div>
</div>
Please note the content of the divs comes from JSON and while the id songName is plain text the id songPicture content looks like this :
<img src='"image url+"' style='position: absolute; left: 50%; margin-left: -128px; top: 50%; margin-top: -171px; width: 256px; height: 256px;' />
Use ui-grid-solo class for each div.
<div class='ui-grid-solo'>
Contents
</div>
Reference: http://jquerymobile.com/demos/1.2.0-beta.1/docs/content/content-grids.html
Consider a web page consisting in a background part that holds an image on top of which I would like to create an animation (for example image=sky and animation=moving-clouds). This thing is 100% width.
On this "canvas", a 100% content part should be placed.
The reason why I am asking this question is because I can simply achieve something like this working with divs and absolute positioning. But I do not know how to make something like this when divs have a 100% width!
I would be able to write something like this:
<div id='canvas' style='width:100%;background-image:...'>
<div id='cloud1' style='...'></div>
<div id='cloud2' style='...'></div>
<div id='cloud3' style='...'></div>
</div>
<div id='cont' style='width:100%'>
my content here
</div>
Styling canvas and cont so that cont appears on canvas and elements like clousx are moved by javascript but they live behind cont.
How to achieve this?
I don't know if I got you right, but you can do it exactly the way you want it. So this is a combination of width: 100%; and position: absolute;.
Demo
Try before buy
The demo uses for demonstration purposes the background-property with a CSS3 rgba-value.
CSS
div.outer {
position: absolute;
width: 100%;
height: 100%;
border:1px solid red;
}
div.text {
background: rgba(255,255,255,0.5);
}
div.cloud {
position: absolute;
top: 20px;
left: 20px;
height: 50px;
width: 50px;
border: 1px solid red;
}
HTML
<div class="outer">
<div class="cloud"></div>
</div>
<div class="outer text">
Content goes here
</div>
I have one horizontally div on the top of my page with a height of 50px.
And now I want to put another div right below it which will fill the rest of entire page (should work with any kind of resolution).
Does anyone know how to do this only with CSS?
I'd appreciate any help. Thanks!
Although this is not stacking the div's it is very simple solution. Make a div that is 100% height and then place a div inside that is 50px in height.
<body style="height: 100%; width: 100%;">
<div style="height: 100%; width: 100%;">
<div style="height: 50px; width: 100%;">Header</div>
<!--Rest of Content-->
</div>
</body>
There are ways to do this. Here is an example using absolute positioning and a wrapper. Obviously ignore the colors-- they're just there so you can see what's going on.
<body style="margin: 0;height: 100%; background-color: yellow;">
<div style="background-color: green; height: 50px">top stuff</div>
<div style="position: absolute; top: 50px; bottom: 0; left:0; right: 0; background-color: blue">main stuff</div>
</body>
This is an example of a layout that is somewhat problematic with "pure" CSS but trivial with tables.
Firstly there is no way of expressing (ignoring CSS expressions, which you tend to want to avoid) "rest of the page" or "100% minus 50px" so the general solution to this problem is.
Create a container that is 100% height;
Put the header at height 50px;
The content simply takes up the rest of the space. Any styling is applied to the container not the content.
So:
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
with:
html, body. #container { height: 100%; }
#container { height: 100%; min-height: 100%; }
#header { height: 50px; }
It gets trickier if you want a footer. That is typically positioned absolutely at the bottom and padding is used on the container so nothing appears under it.