Is there a way to read the width and set a height with the same value ?
I know the trick with viewportheight[vh] and [vm], but it won't work well here.
You can do it by utilizing the fact that in padding-bottom: 100% the percentage is percentage of the width, and not the height. So setting a pseudo-element with padding-bottom: 100% will change the height according to width. The content can be in an absolutely position layer.
(I've added a little hover animation to demonstrate that changing width also changes the height)
.container {
position: relative;
width: 100px;
}
.container:hover {
width: 150px;
transition: width 2s;
}
.container::before {
display: block;
padding-bottom: 100%;
content: '';
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
}
<div class="container">
<div class="content">
</div>
</div>
Related
In Bootstrap 4, I created a div named circle inside col-md-2. this is the width of this I made 100%. I want the shape to be square when it is four. In this case, when I give the height 100%, it extends to the bottom of the page. but I want it to be four times equal. what can I do?
.circle{
position: absolute;
width: 100%;
height: 100%;
background: tomato;
}
In CSS both margin and padding are relative to width, not height. You can use it to make a square by setting for example padding-bottom: 100%, which will pad the bottom by 100% of width.
Example would be
CSS
.square {
width: 200px;
padding-bottom: 100%;
background-color: red;
}
HTML
<div class="square"></div>
If you want to put elements inside that square you can add another element with position: absolute inside it that can contain your elements.
Example would be
CSS
.square {
width: 200px;
padding-bottom: 100%;
background-color: red;
position: relative;
}
.square-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
HTML
<div class="square">
<div class="square-content">your stuff goes here</div>
</div>
I want a child of a div to be positioned to the left of its parent as if they were both sibling spans. That is, the child is actually completely outside of the parent.
The size of the child varies, but the parent has a fixed size.
I have tried using a combination of position: absolute with a negative margin, like so:
.parent {
display: block;
position: relative;
}
.child {
display: block;
position: absolute;
right: 0;
margin-right: -100%;
}
But that didn't work. I also tried many combinations of margins and positions, such as right: -100%, right: 0; margin-left: 100% and nothing works.
I tried using the same combination of right: 0 with a negative margin-right, instead using pixel values. While it does work, it's not ideal. I have multiple of those in my page (they are generated by code) and the size of the child always varies. Is there a CSS-only solution?
simply add left: 100% in your child element.
.parent {
position: relative;
background-color: teal;
width: 250px;
height: 250px;
}
.child {
background-color: blue;
position: absolute;
left: 100%;
width: 50px;
height: 50px;
}
<div class="parent">
<div class="child"></div>
</div>
I made an image that when hovered upon will change the opacity of the div on top of it. The div should be the same size as the image. I have managed to place the div on top of the image. However, when I set the width and height to 100%, the div covered the image INCLUDING the image's margin. I want to know how to fix it so that the div can only cover the image with the margin not included. Please note that I need the image to be responsive, so I do not want to set the height in pixels as much as possible.
Here's the fiddle:
https://jsfiddle.net/gsuxlzt/77vn1uyg/
Here's the code:
.margin {
margin-bottom: 10px;
}
.photo-thumbnail {
position: relative;
}
.photo-title {
width: 100%;
height: 100%;
background-color: #cbe1f4;
z-index: 10;
position: absolute;
top: 0;
left: 0;
color: #18121e;
text-align: center;
opacity: 0;
transition: opacity 0.5s linear;
}
.photo-title:hover {
opacity: .9;
}
<div class="photo-thumbnail">
<img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg" />
<a href=#>
<div class="photo-title">
<h2 style="padding: 20% 0 20% 0;">Project Title</h2>
</div>
</a>
</div>
You can try this code:
Html Code:
<div class="photo-thumbnail"><img class="img-responsive img-thumbnail margin photo-thumbnail" src="http://i36.photobucket.com/albums/e20/kingjami/photo-frame_zpsljshbjdq.jpg"/><a href=#>
<div class="photo-title">
<h2 style="padding: 20% 0 20% 0;">Project Title</h2>
</div>
</a>
CSS Code:-
.margin {
margin-bottom: 10px;
}
.img-thumbnail{padding:0px;}
.photo-thumbnail {
position: relative;
}
.photo-title {
width: 100%;
height: 100%;
background-color: #cbe1f4;
z-index: 10;
position: absolute;
top: 0;
left: 0;
color: #18121e;
text-align: center;
opacity: 0;
transition: opacity 0.5s linear;
}
.photo-title:hover {
opacity: .9;
}
https://jsfiddle.net/Dhavalr/77vn1uyg/8/
first of all, don't use padding and margin for <img> instead use it for .photo-thumbnail
and use this code.
.photo-thumbnail {
position: relative;
display: inline-block;
vertical-align: top;
}
using inline-block for the parent can make image flexible as well as only occupy the necessary area as image.
try this, it will work.
In your example you are missing the closing of your "photo-thumbnail"
You are not obligated to use "Width: 100%", "Height: 100%", when you have an absolutely positioned element, instead you can make it take all of the space with
top: 0;
right: 0;
bottom: 0;
left: 0;
And in your case you can set the
bottom: 10px;
since that is how much your div gets out of the picture
here is an example in a fiddle: https://jsfiddle.net/77vn1uyg/3/
Playing around with some absoloute divs I have in my header. logo, search bar etc and trying to get them centered.
Will margin: 0 auto; ever work with an element set as absolute?
I know of some options to center divs within a 100% width such as calc, transform, flex. Are there any more centering 100% options?
Yes, it will work if the element is positioned correctly and has a width specified.
In the example below, left: 0/right: 0 is added so that the element is centered relative to the parent. For instance:
.container {
position: relative;
}
.absolute {
position: absolute;
width: 80%;
height: 40px;
background-color: #000;
margin: 0 auto;
left: 0;
right: 0;
}
<div class="container">
<div class="absolute"></div>
</div>
Alternatively, you can also use a combination of left: 50%/transform: translateX(-50%) in order to center the element horizontally.
.container {
position: relative;
}
.absolute {
position: absolute;
width: 80%;
height: 40px;
background-color: #000;
left: 50%;
transform: translateX(-50%);
}
<div class="container">
<div class="absolute"></div>
</div>
Why does height: 100% have no effect on #baz in the following code? How could you fix this when min-height on (some of) the ancestor element(s) is required?
HTML:
<div id="foo">
<div id="bar">
<div id="baz">
foo bar baz
</div>
</div>
</div>
CSS:
div { border: 3px solid red; padding: 5px; }
#foo { height: 300px; }
#bar { min-height: 100%; }
#baz { height: 100%; }
See example at http://jsfiddle.net/pmmyP/
Tested with Chrome 12 and Firefox 4.
Using the following kind of works:
#bar { min-height: 100%; position: relative; }
#baz { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
But is there another (or better) way?
Example at http://jsfiddle.net/pmmyP/1/
Don't use min-height when you want height
min-height means it can't go smaller. height: 100% means 100% of the parent element's height (which isn't specified and so it defaults to auto I think).
#bar, #baz { height: 100%; box-sizing: border-box; }
The box-sizing is so that they stay inside each other.
http://jsfiddle.net/Zweu7/1/
Explanation of min-height: http://www.dynamicsitesolutions.com/css/height-and-min-height/