JSFiddle
I have a div with class of container. The height of this div must equal the width. I have achieved this with:
.container{
background-color: #e6e6e6;
position: relative;
}
.container:before{
content: "";
display: block;
padding-top: 100%;
}
Inside the container is an image holder, and inside this an image. The image must be constrained, it's height or width must not exceed the container and still maintain aspect ratio. This is achieved by:
img{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
}
My question concerns the image holder, I need this to be the same width and height as the image that is inside of it. How can I do this? Using CSS only please.
https://jsfiddle.net/1tbrtoaj/4/
Remove position: absolute from your img tag.
.container{
background-color: #e6e6e6;
position: relative;
}
.container:before{
content: "";
display: block;
padding-top: 100%;
}
.img-holder {
border-style: solid;
border-color: #0000ff;
}
img{
top: 0;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
}
Related
I would like to create a following shaped notice bar on the bottom of my webpage (sticky).
Here is my HTML
<div class="notice-container">
<div class="wave"></div>
<div>
<p>Content here</p>
</div>
</div>
And here is my CSS, I tried several things, but here is the latest:
.notice-container {
display: block;
height: auto;
background-color: #ccc;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.wave:after {
content: "";
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: auto;
}
Since the container has a position: fixed, how can I get the repeat-x work on the wave? I would like to display the background-image on top of the container div.
Your pseudo element needs display: block; and also a specified height attribute. Since the value auto would just tell it to extend to fit its contents (and it has none), then the height value would remain 0.
.wave:after {
content: "";
display: block; /* <- Add this */
background-image: url('../wave.png');
background-repeat: repeat-x;
position: absolute;
top: 0;
margin: -30px;
width: 100%;
height: 60px; /* Or whatever your wave.png requires */
}
Place your url and justice the sizes of image in background-size. Also do not forget to change needed height of pseudo element which is also needs to configure margin-top and top
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
footer {
width: 100%;
height: 70px;
border: 5px solid red;
border-top: 0;
margin-top: 20px;
position: relative;
}
footer:after {
width: 100%;
display: block;
content: '';
height: 20px;
position: absolute;
left: 0;
top:-20px;
background-image: url(https://i.stack.imgur.com/z4HMY.png);
background-size: 10% 20px;
}
<footer></footer>
I am trying to place a video on my page, which has to be responsive (16:9 all the time). I found a lot of examples, which are basically the same (applying 56.25% padding at the bottom). However, as soon as I apply a max-height and max-width to the iframe (because I don't want it to fill out the entire page), the content underneath starts to move away (because of the padding).
https://jsfiddle.net/12npu2zu/
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
Is there a way to keep it from doing that? The maximum width is 1000px and the maximum height is 563px (16:9).
Is this what are you looking for, i just wrapped all this in one more div and added same style.
<div class="video-holder">
<div id="video-container">
<iframe width="1000" height="563" src="https://www.youtube.com/embed/U4oB28ksiIo" frameborder="0" allowfullscreen> </iframe>
</div>
<p>This should stay right underneath the video</p>
</div>
CSS:
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
.video-holder{
display: inline-block;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
https://jsfiddle.net/326w5jqj/
So what I ended up doing was placing a transparent image in the container. Then I applied this CSS to all the items:
#video-container {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
img {
display: block;
opacity: 0;
width: 100%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0 none;
}
See it yourself: https://jsfiddle.net/12npu2zu/2/
I have a wrapper div which i want to expand to wrap the content that is dynamically generated. The content generated is a table, that increases based on the number of returned results.
css for wrapper div
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;
}
css for table inside the wrapper div
#Table {
position: absolute;
width: 940px;
height: 319px;
left: 409px;
top: 215px;
}
it doesn't show all the results, when i change overflow to visible it shows all but the results goes beyond the wrapper div, and i still want the footer div to always be at the bottom.
You have a couple of little problems here :)
First: You have set your height to a fixed value "1341px". Because you have set it to this value your div will never get higher than 1341px. You can use min-height if you want the div to only scale when the content gets bigger than 1341px.
Second: Your #Table is positioned Absolute. Wich means that the parent will always ignore the size of the #Table element when rendering.
i suggest you have a quick look at http://www.w3schools.com/css/css_positioning.asp for some more information on this toppic.
Try the following css:
#wrapperDiv {
position: absolute;
width: 100%;
height:1341px;
left: 0px;
border: 5px solid #408080;
overflow:hidden;}
#Table {
position: relative;
float: left;
width: 940px;
height: 319px;
margin-left: 409px;
margin-top: 215px;}
Happy coding :)
As someone say it in comments, height: auto; should works fine. But your code is a mess. I think you don't understand how css position works;
Let's create a container (.Container) and fill the parent (.Container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; }). And simply add { position: absolute; width: 100%; bottom: 0; height: auto; max-height: 100%; overflow: auto; } for dymanic content block.
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #F72F4E;
overflow: hidden;
}
.Container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 5px solid #408080;
overflow: hidden;
}
.Content {
position: absolute;
width: 100%;
height: auto;
max-height: 100%;
overflow: auto;
bottom: 0; //or top: 0;
background: rgba(0,0,0,.2);
}
<main class="Container">
<div class="Content">Dynamic Content</div>
</main>
I have the current html structure
<release_cover>
<overlay_controllers> Green Div </overlay_controllers>
<img src="blu.div" />
</release_cover>
And I want to achieve this:
The img tag is the blue container.
The magenta is the release_cover tag.
I have problem in setting the overlay_controller tag (the green) at a 20% height, exactly positioned at 80% of the container.
So far i did:
release_cover{
width: 100%;
height: 100%;
position: relative;
}
release_cover img{
width: 100%;
height: 100%;
}
overlay_controllers{
min-height: 20%;
margin-top: 80%;
position: absolute;
width: 100%;
}
Unfortunately the height of the green div depends on what's inside and not a fixed 20%.
Suggestions?
(example with the suggestions received so far: https://jsfiddle.net/82Lb0nhe/ )
Using a combination of absolute position along with top, while also not allowing a height greater than 300px it will compute correctly:
.container {
width: 300px;
height: 300px;
}
overlay_controllers {
z-index: 2;
bottom: 0%;
position: absolute;
margin-top:;
height: 20%;
width: 100%;
background-color: #fc0;
}
release_cover {
top: 0px;
width: 100%;
position: relative;
display: block;
overflow: hidden;
margin: 0px;
padding: 0px;
max-height: 300px;
}
release_cover img {
padding: 0;
margin: 0px;
z-index: 1;
width: 100%;
height: 100%;
}
Working fiddle: https://jsfiddle.net/fL98w9of/
You could position overlay_controllers using top instead of margin-top property:
release_cover {
width: 100%;
height: 100%;
position: relative;
display: block;
}
release_cover img {
width: 100%;
height: 100%;
}
overlay_controllers {
position: absolute;
top: 80%;
height: 20%;
width: 100%;
overflow: hidden;
}
In IE9 This Page element section#tcs-website-content shows 990px width with CSS width: 100% where all parent elements have width of 100% thus having browser width which is 1024px
I have no experience with IE9 whatsoever, so I don't know what is the problem I need to look at.
CSS (LESS) for the elements:
html, body {
margin: 0;
padding: 0;
max-height: 100%;
min-height: 100%;
height: 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
position: relative;
background: none;
font-family: 'muliregular','oswaldregular',Arial;
}
#viewport {
display: none;
position: relative;
float: left;
width: 100%;
height: 100%;
overflow-y: hidden;
background: none;
}
#tcs-website-content {
position: absolute;
z-index: 100;
top: 120px;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
overflow-y: auto;
#bundle .box-sizing();
& .inner-content {
width: 960px;
margin: 0 auto;
}
}
If you want to be sure it covers the whole width, I would add the following definition to #tcs-website-content:
right: 0;