How to get Parent div height if its child has position absolute

Question

In my code I have a parent div and inside it I have two child divs. First child div is float:left and the second div has position:absolute . My problem is that I want to grow parent div height auto by its child.

Here is the CSS:

#msgbody{
    margin-top:20px
}
.clr{clear:both}
.leftalign .imgbox{
    float:left;
}
.leftalign  .callout {
    position: absolute;
    left:70px;
    padding:10px;
    background-color: #EEEEEE;
    /* easy rounded corners for modern browsers */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.leftalign  .callout .notch {
    position: absolute;
    top: 10%;
    left: -10px;
    border-left:0;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #EEEEEE;
    border-top: 10px solid transparent;
    width: 0;
    height: 0;
    /* ie6 height fix */
    font-size: 0;
    line-height: 0;
     /* ie6 transparent fix */
    _border-right-color: pink;
    _border-left-color: pink;
    _filter: chroma(color=pink);
}
.imgbox{
    border:1px solid #afc8c8;
    padding:3px;
    background:#fff;
    margin-right:10px;
}
.circle{
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
}
.subimgbox, .imgbox{
    display:block;
    width:46px;
    height:46px;
}
.subimgbox{
    overflow:hidden;
    background:#f3f3f3;
}

Here is the HTML:

<ul id="msgbodyli" class="ln">

    <li class="leftalign">
        <div class="imgbox circle">
            <div class="subimgbox circle"></div>
        </div>

        <div class="callout">
            Various browsers end up with jagged edges when you create these arrows.
            The safest angle to get your arrow to render without jaggies is 45%. This can be done by just making all the border-widths the same except for one being zero
            <b class="notch"></b>
        </div>
        <div class="clr"></div>
    </li>

    <li class="leftalign">
        <div class="imgbox circle">
            <div class="subimgbox circle"></div>
        </div>

        <div class="callout">
            Various browsers end up with jagged edges when you create these arrows.

            <b class="notch"></b>
        </div>
        <div class="clr"></div>
    </li>
</ul>    

Because the parent div is in a 'for loop', when the next parent div comes it overlaps the first one. See this image:

Most importantly, I don't want to do it by Javascript or jQuery. I want fix it with only CSS. Is that possible? Let me know if you have any questions. Here is the fiddle link: http://jsfiddle.net/sarfarazdesigner99/fpMyV/

Thanks in advance!

Answer 1

From my knowledge - you cannot do this with position:absolute.

Check this fiddle -

changes are ==>

• ul and li's to Div's
• overflow:hidden;height:auto;