I have an outer div
position: relative;
overflow: hidden;
min-heigth: 450px;
containing a div
position: absolute;
top: 10px;
right: 10px;
The inner div is bigger than the min-heigth of the outer div and I see that the outer div is not scaling to the content of the inner div. Capping off the bottom content of the inner div.
How can I define the outer (or inner) div to scale vertically to the content (of the inner div)
Thanks
#trascher; It's possible but you have add extra markup because when you give a child div an absolute position then it's parent div is not consider it's height.
Check this http://jsfiddle.net/sandeep/6UksD/1/
CSS:
#outer
{
position: relative;
min-height: 450px;
background:red;
margin:10px 0 0 10px;
width:200px;
overflow: hidden;
}
#inner
{
position:relative;
background:black;
height:600px;
width:100px;
margin:10px 0 0 10px;
float:left;
}
#abinner
{
position:absolute;
background:yellow;
height:100%;
width:100%;
}
HTML:
<div id="outer">
<div id="inner">
<div id="abinner"></div>
</div>
</div>
First remove the min-heighton your outer div, and then instead of absolutely positioning the inner one, put a 10px padding on the outer one.
#outerDiv {
position:relative;
overflow:hidden;
padding:10px;
}
#innerDiv {
/*Stuff*/
}
Do provide us with an example though, it's hard to see the context...
Here's the stuff
<div id="outer">
<div id="inner"></div>
</div>
#outer
{
width:300px;
height:auto;
}
#inner
{
width:200px;
height:300px;
}
I think this is thing you want:http://jsfiddle.net/anish/ZjQTt/
set inner content height according to your wish.the outer div expanded automatically.
Absolute positioning doesn't increase the height of it's parent element.
You either set the height of the outer div manually
You make the inner div to have margin top/left of 10px
You increase the height of the outer div using javascript.
Related
I want to change the inner div height according to the outer div.
In my case I have two inner divs one with fixed height and the outer div expands its heigh according to that (I use 'clearfix' there). But I need the other inner div also change its height to the outer div height
height : 100%; did not work.
This is a JsFiddle link to show my problem.
https://jsfiddle.net/qjsqxk7j/18/
HTML ->
<div class="outer clearfix">
<div class="col-xs-3 left">
</div>
<div class="col-xs-9 right">
<div class="inner">
<label>sssss</label>
<button class="btn-default">
sss
</button>
</div>
</div>
CSS ->
.right {
height: 100%;
background-color: blue;
}
.left {
height: 200px;
background-color: red;
}
.inner{
position: relative;
top: 50%;
transform: translateY(-50%)
}
.outer {
background-color: yellow;
position: relative;
max-width : 500px;
}
Actually I want the Blue div take all the yellow space left and the button and label comes to its vertical centre.
(I want my outer div to get one of its inner div height and changed accordingly.And then when the outer div height changes the other inner div also has to change its height. But it won't.)
Try below code and yes I have remove clearflex from parent element as it clear float for both child element. This increase and decrease it's hide when child element height increase and vise versa i.e. same for parent element.
.outer{
width:100%;
height:auto;
background:yellow;
position:relative;
border-bottom:1px solid #111;
display:table;
}
.outer > .right{
width:50%;
height:auto;
background:red;
float:left;
word-break : break-all;
}
.outer > .left{
width:50%;
height:auto;
background:blue;
float:left;
}
see here jsfiddle
i used display:table-cell on the 2 columns ( left and right ) and display:table to .outer . for this to work you need to overwrite the float:left from the columns given by bootstrap
code added
.left,.right {
display:table-cell;
float:none;
vertical-align:middle;
}
.outer {
display: table;
}
or with a little JQ : jsfiddle
code :
var hgt = $(".outer").height()
$(".left").height(hgt)
let me know if this was what you were looking for
change some css Remove your Comment code
.right {
height: 200px;
background-color: red;
}
.left {
height: 100%;
background-color: blue;
}
.inner{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.outer {
background-color: yellow;
position: relative;
max-width : 500px;
height:200px;
}
https://jsfiddle.net/qjsqxk7j/25/
I have a div with an absolute positioning which is again a child of absolute positioned element. setting width:100%;left:1px;right:1px to the child not working. Problem i face is, its getting beyond the parent the element.
<div class="outer">
<div class="inner">
</div>
</div>
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
width:100%;
height:100%;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
Refer here
Just take away the 100% on the child element and the inner div will fit the parent.
.outer{
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
}
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
This is because you have the width and height to be 100%, meaning it'll be also 80px PLUS the top left right and bottom properties so the box lays over the other. Now if you want it to go inside the box and be perfectly proportioned remove height and width:
.inner{
position:absolute;
background:red;
left:1px;right:1px;bottom:1px;top:1px
}
You can also make this:
.outer{
margin-top: 10px;
position:absolute;
width:80px;height:80px;
border:1px solid #d3d3d3;
padding: 1px;
}
.inner{
position:relative;
width:100%;
height:100%;
background:red;
}
When I try to set height: 100% on a child div, the height stays 0.
This is the parent div:
#game-content {
margin-top: 50px;
overflow: auto;
height: 100%;
width: 100%;
}
#game-wrapper {
float: left;
margin-left: 90px;
position: relative;
height: 100%;
}
<div id="game-content">
<div id="game-wrapper">
<div class="game">
<img class="game-element" src="http://placehold.it/200x200" />
<div class="game-element" id="description">
<h4 id="game-header">Game1</h4>
Desc
</div>
</div>
</div>
</div>
The height of game-content is also 100% (it's not 0). Although the height of game-wrapper stays 0, while the width does work. What am I doing wrong?
the #game-content or its parent(body) must have a fixed height, if try setting a fixed height in #game-content the #game-wrapper will have its 100% height.
Try out:
#game-content
{
margin-top:50px;
overflow:auto;
height:1000px;
width:100%;
}
#game-wrapper
{
float:left;
margin-left:90px;
position:relative;
height:100%;
}
or
body, html { /* both to be sized */
height: 1000px; /* or 100% */
}
A block element gets it height according to the content it has. Since you are giving a percentage height to the parent #game-content which does not have a well defined child content height (you are giving the child too in pixels), it is creating this problem. Giving a specific height to the parent solves the problem.
#game-content
{
margin-top:50px;
overflow:auto;
height:someheight px;
width:100%;
}
#game-wrapper
{
float:left;
margin-left:90px;
position:relative;
height:100%;
}
what i am looking at is a common issue with floating elements. a element that is floated does not affect its parents as one would expect. simply floating the parent element, in this case #game-content will do the trick.
#game-content
{
float:left; /* just need this one line */
margin-top:50px;
overflow:auto;
height:100%;
width:100%;
}
I am trying to arrange 3 divs side by using float:left, there is fixed height for two div's child1 and child3, but there is no height for child2, i need the child2 div height as the same height of the container div.
<div id="container">
<div id="child1">Child1</div>
<div id="child2">Child2</div>
<div id="child3">Child3</div>
<div>
#container
{
margin-left: 3px;
padding: 10px 0px;
position: relative;
display: block;
width: 500px;
background:yellow;
overflow:hidden;
}
#child1
{
float:left;
width:100px;
height:300px;
background:green;
}
#child2
{
float:left;
width:100px;
height:auto;
background:cyan;
}
#child3
{
float:left;
width:100px;
height:400px;
background:red;
}
here is the fiddle: http://jsfiddle.net/2ksxL/2/
You can change the #container {display: flex;}, but that does not have awesome support in IE (http://caniuse.com/flexbox). If you need more support you will have to come up with a jQuery solution that can find the height of the container and give it to #child2.
Since you haven't define any height for container, the container height is going to depend on the max height that's been defined to the #childX. In this case, #child3. So what you can do is compare the height of both #chidl1 and #child3 and set the height of #child2 to the max one via this little jQuery.
var highestCol = Math.max($('#child1').height(),$('#child3').height());
$('#child2').height(highestCol);
FIDDLE
Please look at following
Fiddle1
Fiddle2
HTML:
<div class="container">
<div class="content">
<div class="space">
</div>
<div class="item">
DIV1
</div>
</div>
</div>
CSS:
.container {
position:relative;
height: 100%;
width:100%;
}
.content {
height:100%;
border:1px solid red;
}
.space {
margin-top:80px;
border:1px solid blue;
}
.item {
position: absolute;
top:80px;
left:50px;
font-size:20px;
font-weight:bold;
color: #999999;
text-align: center;
}
The only difference is the border statement in content class but output is different.
Can you please explain what is happening?
It's margin collapsing. The border, when present, prevents the top margin of the .space from collapsing. Without the border, it collapses with the top margin of all its ancestors including body (which is the 'base' for the position of .item), causing them to move 80px down.
.item is getting position absolute with top as 80px relative to .cointainer DIV. Element with position as absolute will position itself with reference to its parent whose position is defined as relative or to BODY element. In your case top most parent element .container is having positon: relative so for element .item top: 80px will be calculated from top of .container and since .item is positioned as absolute it will contained only withing its parent with position: relative or body element, so in your case its a top most element .container