How to make outer div expand to the height of all its dynamically generated content?

Question

I have a pretty particular CSS setup: I have one large 100%-width box that consists of a fixed width & height image on the left, and a text-container (filling the rest of the box) made up of two columns (50%-width of the text-container). These two columns have dynamically generated content so have varying heights. I would like to get my large box to be the height of all the content it contains.

Here is an example of what I would like, as well as a JSFiddle of what I currently have (the .outerdiv doesn't have a defined height so everything is collapsed).

 ____________________________________________________________________________________
| _________  __________________________________  ___________________________________ |
||  IMAGE  ||           column 1               ||             column 2              ||
||  fixed  ||50% of entire width minus img     ||                                   ||
||  width  ||width, height depends on content  ||  50% of entire width minus img    ||
||         ||__________________________________|| width, height depends on content  ||
||_________|                                    |  This part of the column is still ||
|                                               |  included in the big outer div    ||
|                                               |___________________________________||
|____________________________________________________________________________________|

I would love any help on this. Please let me know if you need me to clarify the issue.

Answer 1

I'd ditch the absolute positioning and use this:

.outerdiv {
    width: 90%;
    margin: 0 auto;
    background:yellow;
    border: 1px solid black;
    display:inline-block;
    position: relative;
}
.img-box {
    height:200px;
    width:150px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.img-box img {
    height:200px;
    width:150px;
    margin: auto;
    vertical-align:middle;
}
.text-container {
    margin-left:160px;
}
.left-div, .right-div {
    width: 50%;
    float: left;
    overflow:hidden;
}

<div class="outerdiv">
    <div class="img-box">
        <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample1_l.jpg">
    </div>
    <div class="text-container">
        <div class="left-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div class="right-div">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</div>