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)

Answers


You need to add overflow: auto to #main:

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}

You should use the clearfix method with pseudo-element :after because in your case, the clear isn't really applied after the children.

#main:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; 
}

http://jsfiddle.net/zfsjb/


Try giving width: 100%; position:absolute to #main.

Here is a working Live Demo


Need Your Help

Finding A - B from two arrays using underscore.js

javascript underscore.js

I have to filter out certain elements from an array in javascript and thought of using underscore.js for this purpose. As I am new to it,some help is appreciated.Please refer the code below , I hav...

How to use NSCache

ios objective-c xcode cocoa nscache

Can someone give an example on how to use NSCache to cache a string?