Question

I have data that is ajaxed in to <div class="content">. I want the outer div to expand to the height of the inner div. I can’t figure out how to do this.

HTML:

<div class="outer">
    <div class="inner">
        <div class="content">Stuff goes here</div>
    </div>
</div>

CSS:

.outer {
    width: 740px;
    min-height: 250px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 10px;
}

.inner {
    position: absolute;
    top: 70px;
    left: 10px;
    width: 335px;
    bottom: 0;
}

.content {
    font-size: 13px;
    margin: 0 0 7px 0;
    text-align: left;
    position: relative;
}

I want the outer div to expand to the height of whatever is inside <div class="content"></div>. How can I do this?

Answer 1

This happens when you use POSITION in your CSS. Remove the POSITION from the INNER class and the OUTER div will expand correctly. Perhaps you could use margins to position you inner div.

EDIT:

Here is a possible alternate CSS for you. It may or may not be appropriate for you requirements.

.outer {
    width: 740px;
    min-height: 250px;
    margin: 0 auto;
    position: relative;
    padding-top:70px;
    padding-left:10px;
    margin-bottom: 10px;
}

.inner {
    width: 335px;
    bottom: 0;
}

.content {
    font-size: 13px;
    margin: 0 0 7px 0;
    text-align: left;
    position: relative;
}