Question

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

Answer 1

@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>