force a div to contain floated child divs

I'm trying to customize the twentyeleven theme in Wordpress. It has a 2-columns layout set up by:

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

and

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

I am not sure that there are other relevant css properties inside style.css which I have not recognized. Anyway, the child divs lie outside #main. How can I force to have the child divs contained in #main? (apart from reducing the width of #primary, which yields no effect to me)