I have a fluid width div which is within another block-level element.
HTML
<div></div>
CSS
div {
width:50%;
min-height: /*equal to width */;
}
I want the min-height set equal to the width so that it is a square shape unless there is too much content. At that point, it should expand vertically. Can this be achieved with CSS?
What I've tried:
Using percentage paddings or margins, but this only sets height, not max--height and pushes the content down.
Because padding is relative to an elements width, you can use a pseudo element to force a min height by using padding-top: 100%;:
div {
float: left;
margin: 10px;
width: 25%;
background: lightGreen;
position: relative;
}
div:before {
content: "";
display: block;
padding-top: 100%;
float: left;
}
<div></div>
<div>
div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content. div with content.
div with content. div with content. div with content. div with content. div with content. div with content.
</div>
<div>
div with content. div with content.
</div>
One option would be to use viewport percentage units. In this case, 50vw is 50% of the viewport. If the div is a root element and its width is relative to the viewport, then this work work as expected. You would otherwise have to calculate the height relative to the viewport for this to work.
For example:
div {
width: 50vw;
min-height: 50vw;
background: #000;
}
<div></div>
Based on #Turnip's answer, here's what I ended up using this:
/* Maintain Height While Loading Trick */
figure {
background: #999;
width: 100%;
overflow: hidden;
line-height: 1;
}
figure:before {
content: "";
display: block;
padding-top: 100%;
float: left;
}
/* some other CSS that's probably in your project already */
div {
max-width: 25%;
margin: 10px;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
<div>
<figure>
<img src="https://picsum.photos/4000/4000" alt="">
</figure>
</div>
<h1>Some stuff below the image. Is it jumpy?</h1>
Related
I am trying to make a parent element honour the width of a child image.
It works on load, but if you resize the height of the viewport to force a change in the image height, the parent element 'remembers' the initial size of the image and maintains that width.
If you mimic the above with width instead of height, there is no problem.
Here is a video of the behaviour: http://jmp.sh/8VEOZS8
Here is a codepen: http://codepen.io/iamkeir/pen/YWgvdw
html, body { height: 100%; }
.wrapper {
display: inline-block;
height: 100%;
border: 1px solid black;
}
img {
height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/1280x960" />
</div>
I'm interested to know:
1) why this is happening
2) if there is a way to fix it
Thanks!
You can fix it by setting max-width and max-height attributes to the image so it wont overflow the wrapper or the window. Then you can set the display: inline-block; to the wrapper instead which is nowadays used in replacement of floating elements. I set the image to be display: block; just so it will display it as a block element and eliminate weird space around it etc.
html, body { height: 100%; }
.wrapper {
display: inline-block;
border: 1px solid black;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/1280x960" />
</div>
I set a width & height to the parent images div. There are two child divs inside of it called image_one and image_two with a set width. The problem is that when I reduce the width of the viewport, the image_two div escapes the parent div and comes under the image_one div. How do I keep this div from escaping? I figured that setting a percentage width would automatically resize the div to stay inside of the parent div. When I set an overflow:hidden, both of the divs disappear.
Here is a link to the code:
http://codepen.io/matosmtz/pen/ZGpNmy
<div class="images">
<div class="image_one">
<p style="background-color:red; text-align:center">Photo</p>
</div>
<div class="image_two">
<p style="background-color:red; text-align:center">Photo</p>
</div>
</div>
.images {
padding: 0;
margin: 0;
width: 100%;
height: 220px;
}
.image_one {
width: 30%;
height: 200px;
position: relative;
background-color: black;
padding: 5px;
float: left;
margin: 5px;
}
.image_two {
width: 30%;
height: 200px;
position: relative;
background-color: black;
padding: 5px;
float: left;
margin: 5px;
}
The .images div is 100% width. This includes the sidebar on your codepen.
The child divs are 30%, but this means 30% of the whole space. So when you reduce the size of the browser, eventually they are big enough to need to slide under one another, because your .sidebar has a fixed width of 200px.
I would suggest having a look at how the Bootstrap CSS works in order to find your fix for this, or straight out using that.
I am having difficulties positioning divs on the screen. I want them to be positioned inline, I have specified display:inline-block or float: or a combination thereof. However whenever I re-size the window the divs disappear or re-position below each other. I read a solution that suggested to encapsulate the divs inside a wrapper div and tried that solution but I stumble upon the same problem since I want the wrapper div to occupy the full height of the screen with no y overflow so if I specify a height:100% the child elements re-size whenever the window re-sizes;
------------------
header
------------------
div1 div2 div3
------------------
In order to stick to your design, add this CSS code to your body:-
html, body {
width: 100%;
max-width: 100%;
margin: 0px;
}
wrapper {
position: relative;
width: 100%;
height: auto;
}
#divOne {
box-sizing: border-box;
display: block;
width: 30%;
float: left;
}
#divTwo {
box-sizing: border-box;
display: block;
width: 40%;
float: left;
}
#divThree {
box-sizing: border-box;
display: block;
width: 30%;
float: left;
}
Giving them a fixed but relative width will stop the problem of repositioning of divs. Add div1, div2 and div3 inside the wrapper div.
NOTE: The border-box property will take care of the extra margin, border or padding you add.
<div class="vid-thumb-lg">
<div class="vid-thumb">
<img src="./images/hqdefault.jpg">
</div>
</div>
Vid-thumb-lg: is parent div for my img and its caption inline
Vid-thumb: is div where image is actually contained
I want to stretch image size without setting width/height of parent div. I have used following code of CSS:
.vid-thumb {
float: left;
border: 1px solid #333;
position: relative;
overflow: hidden;
background: #f1f1f1;
vertical-align: middle;
display: inline;
}
.vid-thumb img {
margin-top: -46px;
overflow: hidden;
position: relative;
}
But still image size is larger, I need to shrink image from to, left, right, bottom.
You need to set the width and height of the container, OR the dimensions of the first container vid-thumb-lg.
Then, if you don't want to use precise px size, use percentage.
Fill the container =
width: 100%;
height: 100%;
Instead, if you are talking about that little space on the bottom of the div.. is an invisible blank space you have by default in divs. You can remove it with:
div {
line-height: 0;
}
Do you mean like this?
http://jsfiddle.net/x59zLtn8/2/
Two divs are side by side, one is floating left with a width of 25%, the other just has a width of 75%. But when padding is applied on the right hand div, the padding doesn't work properly.
Here is a JSfiddle example:
http://jsfiddle.net/88upt/
<div id="top">
</div>
<div id="middle">
</div>
<div id="bottom">
</div>
CSS
#top {
float: left;
background-color: green;
width: 25%;
height: 100%;
}
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
}
#bottom {
background-color: red;
min-height: 70%;
}
Can someone explain to me why this is happening?
Thanks
Floating something is kind of like making it's position absolute. It will hover on top of it's neighboring containers. Add a margin-left equal to the width of the floated element to make the container the correct width.
http://jsfiddle.net/88upt/4/
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
margin-left:25%
}
EDIT Elaborating a bit more.
The floated element pushes the content of the sibling elements over. It will not push the left side of the content's element over. The padding is there it's just hidden by the floating element.
Add overflow = "auto" in the #middle.
#middle {
background-color: blue;
padding: 30px;
min-height: 30%;
overflow: auto;
}
In this way, you don't need to know the width of floating element.
Width doesn't factor in padding.
Source: http://www.w3schools.com/css/css_boxmodel.asp
The width only applies to content, not padding, border, or margin.
You can find more information here.