Resize parent div to match absolutly positioned child div height

Question

I have a CSS problem:

I have an absolute positioned div in a container. The container won't resize to the height of the content. Why?

Answer 1

You need to use JavaScript for this. With jQuery you can do

var parentHeight = $('#parent').height(),
    childHeight = $('#child').height();

if (parentHeight <= childHeight) {
    $('#parent').height(childHeight);
}

Check working example at http://jsfiddle.net/mkCU5/2/

Answer 2

Because when you give absolute position to something, you take it out of the layout flow. This means that its dimensions are no longer used to calculate its parent's height, among everything else.

If your element has a known fixed height, then you can give an appropriate height to its parent element as well. Otherwise you should look for another way to achieve your goal.

Answer 3

When something is absolutely positioned with CSS, it takes it out of the flow. When it's out of the flow, it won't be accounted for in height calculations.