How to make outer div fit child divs?

Question

There is two piecharts in fiddle. Why the content isn't fit with things that inside of it? What is the reason of overflowing charts out of the content? I want put these charts in to yellow content area. Being a css newbie i don't know that how i can fix it.

#content {
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    padding: 10px 20px 30px 20px;
    background-color:yellow;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
}

---

<div id="content"> 
    This is the content area
    <div id="piechart1" style="position:relative;top:20px;float:left;"></div>
    <div id="piechart2" style="position:relative;float:left;"></div>
</div>

Answer 1

It's actually a very simple fix - just make the #content div overflow:auto . By default it won't expand to cover the child divs because they are both floated left, which effectively collapses them. Making the parent overflow:auto forces to expand to cover the width and height of the floated divs too.

http://jsfiddle.net/wuKFJ/5/

Answer 2

#content {
    width:80%;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    padding: 10px 20px 30px 20px;
    background-color:yellow;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
    overflow: auto.
}