CSS - relative positioned parent div not stretching to absolute child div height

Question

I\'ve been googling this all morning and can\'t seem to get it to work:

I have a parent DIV with Relative positioning and a two column child DIV setup inside of it,

Answer 1

Your column divs won't effect their containing div while they have absolute positions as they're removed from the normal page flow.

Instead, try floating them then have a div with clear: both; after them.

Answer 2

Dark side of the force is a pathway to many abilities some consider to be unnatural.

$(document).ready(function() 
{
     var objHeight = 0;
     $.each($('#content').children(), function(){
            objHeight += $(this).height();
     });
     $('#content').height(objHeight);
});​

Answer 3

You do not need position: absolute for this task.

#content {
    width: 780px;
    padding: 10px;
    position: relative;
    background: #8b847d;
}

#leftcol { 
    width: 500px;
    float: left;
}

#rightcol {
    width: 270px;
    position: relative;
    margin-left: 510px;
    text-align: center;
}

Answer 4

I have just been struggling with that for a while and found a real solution CSS-only is to change positioning of 'absolute' divs to 'relative'. This really works!!!

Tested on a Mac, using Safari 5.1.5 and Chrome 21.0....

Hope this will help someone else.

Answer 5

clearing works but ive had weird results. then i found a post that makes it much easier and perfect in all browsers.

Set your child divs to float:left/right. Then put "overflow:hidden" on the parent. Because you haven't specified a height, it will just wrap to teh child elements perfectly. I haven't use'd clearing for ages now.