Question

I have a simple problem where I have 2 divs, 1 is relative positioned. The child element is absolute positioned. This child has varying height.

The code so far:

HTML

<div id="wrap"><div id="inner"></div></div>

CSS

#wrap {
    width: 100%;
    background: #ccc;
    position: relative;
    min-height: 20px;
}

#inner {
    width:30%;
    background: #000;
    position: absolute;
    right: 0;
    top: 0;
    height: 200px;
}

The problem I have is that the #wrap element doesn’t adjust its height to match the child element and therefor the child element hangs outside the edge of the parent. Can this be done with relative and absolute positioned elements?

I know this can be achieved with floating elements and following them with css => cleared: both, but I’d like to know if its possible with this method.

I’ve created a jsfiddle of this problem over here if anybody would like to help me out!

Thanks a lot.

Answer 1

Absolute positionned elements are outside the flow so parents can’t adjust their height.

But you can simply use:

#wrap {
    width: 100%; /* useless */
    background: #ccc;
    overflow:hidden; /* establish a new formatting context */
    min-height: 20px;
}

#inner {
    width:30%;
    background: #000;
    float:right;
}