CSS Parent DIV Container Height Issue

The above picture correctly describe issue with float based div. When parent div height is not fixed parent container not automatically stretch to accommodate inner divs.  If  inner divs content is fixed then you can solve this issue by setting parent container fixed height. Remember height should be defined in pixels not in percent. You can not set height:100%; here because it only works when parent container has fixed height. It simply means when parent container in above figure have one more container that have fixed height then height:100% will work for for second parent container. See the below figure to see what exactly i am talking about.

As you see in the above figure we took 3 div with fixed height so the second parent div automatically stretching automatically according to inner div heights. You can set first div margin,padding and border off so it will exist but will not visible in front page. The above solution will work but again this is not perfect solution because we are fixing height here. What if content is frequently changeable then you might be needed to change height each time.

Easy Solution:

The easiest solution is to use overflow:auto property in parent container. This will instruct browser to stretch automatically according to the inner div content. This looks fairly easy. If you want to see it live and how it works click here and browse source code.