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, both positioned Absolute. I need the parent DIV's height to stretch with the content of the inner DIV's.

I have tried putting a .clearfix type bit before the closing tags for #content but I'm not floating anything. I've also tried adding a float attribute to the #content div to no avail. Can anyone point me to the right direction here. Clearly I'm missing something with how the nested displays affect each other.

CSS:

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

#leftcol {
    width: 500px;
    position: absolute;
}

#rightcol {
    width: 270px;
    position: absolute;
    left: 500px;
    margin-left: 10px;
    text-align: center;
}

HTML:

<div id="content">
    <div id="leftcol">
        <p>Lorem Ipsum</p>
    </div><!-- /leftcol -->
    <div id="rightcol">
        <img src="images/thumb1.jpg">
        <img src="images/thumb2.jpg">
    </div><!-- /rightcol -->
    <br style="clear:both;">
</div><!-- /content -->

Fitts

Answer 1

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);
});​

Ecclesiology

Answer 2

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.

Dottydoty

this does not make the parent div's height grow with the absolute positioned child! – Guidebook

@Guidebook i know, hence why i said "set your child divs to float" (rather than absolute positioned). try reading all of an answer before commenting in future, saves you looking silly. – Dottydoty

Sorry typed my comment wrong. I actually replaced position: absolute with float:left. It doesn't do the trick in my case. – Guidebook

@Guidebook try adding width:100% to the parent div too (assuming the parent should be 100% width). I think it only works if the browser can detect the parent dimensions. This is however a 3 year old answer, and i haven't done frontend dev work in a long time. Maybe try creating a new question or at least a jsfiddle of your problems as this does work (i have several completed websites to back that up), but as with every fix it needs to be applied correctly and isn't suitable in all situations – Dottydoty

@Lee, It's not clear from your answer that you have to do float:left instead of position:absolute. You should edit that. – Theseus

Answer 3

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.

Alright

So, my best bet to have the parent div always stretch below the content would be a floating each column left and right, respectively? – Fitts

You can float them both left, or float them both right, or float one each way that doesn't matter. If you then have a div with clear: both; underneath them (still inside the parent div) your parent div will stretch to the bottom of your two columns. – Alright

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.

Hydrogenize

This does not solve the problem if absolute divs are required – Araby

Answer 5

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;
}

Expansile

This works but doesn't give me the ability to have either right or left column push the parent div's height, however I appreciate your response and I did learn something from your answer. – Fitts

The height of the parent div should grow with the height of the child divs. you need to leave the clear:both element as in your question's html – Expansile