根据子DIV高度具有父DIV高度自动大小

Question

I have a parent container that encapsulates a number of child containers. The child containers have heights depending on the amount of text they hold. I would like the child containers to determine the height of the parent container. So if a child container has a height of 40px, then the parent container height should be 80px. If the child container has a height of 100px, then the parent container height should be 140px (40px fixed + 100px variable).

I've tried leaving the height of the parent container undefined or set as auto or set at 100%, but they all leave my parent container with a height that is too small to hold the child container. If I give my parent container height a set pixel then the problem goes away.

My parent DIV with fixed height(divs behave as expected)

.resultsbox{
    width: 800px;
    position: relative;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #DDD;
    border-radius: 5px;
    height: 400px;
}

jsFiddle example with set height:

http://jsfiddle.net/Uj5FP/6/

My parent DIV with no height set(parent height isn't enough to hold child)

.resultsbox{
    width: 800px;
    position: relative;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #DDD;
    border-radius: 5px;
}

jsFiddle with no height set:

http://jsfiddle.net/Uj5FP/7/

How do I make the parent height auto-adjust correctly?

Answer 1

Here is another attempt. Wrap your absolutely place elements in <div class='absolute-panel'> :

<div class='resultsbox'>
    <div class='absolute-panel'>
        <div class='reviewtitle'>    
          <strong>Fun</strong>
        </div>
        .
        .
        .
        <div class='reviewstatsright'>    
            <span class='text-info'>
                <dt>Rate</dt><dd>$50</dd>
            </span>
            <span class='text-info'>
                <dt>Tip</dt><dd>$10</dd>
            </span>
        </div>
    </div><!-- .absolute-panel -->
    <div class='reviewbody'>
        <p>What a great time!</p>
         <cite>-Rodger</cite>
    </div>
</div>

For the CSS:

.absolute-panel {
    border: 1px solid blue;
    width: 800px;
    height: 150px;
    position: relative;
    left: 0px;
    right: 0px;
}

For the .resultsbox , take out the absolute positioning...

.resultsbox {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #DDD;
    border-radius: 5px;
    border-left: 1px solid red;
}

For the .reviewbody take out the absolute positioning... and add 40px bottom padding (if needed):

.reviewbody {
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 40px;
    border: 1px dotted red;
}

Comment
I added some colored borders to keep track of things and these can be removed.

The trick is to define a fixed height panel to add all your precisely positioned elements.

After this, add your review body which has a variable height.

The fiddle: http://jsfiddle.net/audetwebdesign/8mRVp/

Answer 2

There are a lot of things on this page you could do different and much simpler, but that is a different conversation.

I think what you are really asking about is clear fix options. The most basic is just adding overflow:hidden to the parent element.

And another option that I use for clear fix is: http://nicolasgallagher.com/micro-clearfix-hack/

The difference is, if you have any content spilling out of the box, overflow:hidden will hide it and micro clearfix will show it.