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.
div. Could you make a jsFiddle test case of your HTML/CSS?min-heigth: 450px;should bemin-height: 450px;. That could cause other issues. If it's not a direct cut-n-paste then disregard :)