css - clear floats doesn't work - css

Question

I have a clear floats problem I can't figure out. This is the HTML code:
<div id="main">
<div id="primary">
<div id="content" role="main">
</div><!-- #content -->
</div><!-- #primary -->
<div id="secondary">
<div><!-- #secondary -->
</div><!-- #main -->
This is the CSS for each element:
#main {
clear: both;
}
#primary {
float: left;
width: 100%;
margin: 0 -40% 0 0!important;
}
#content {
background: none repeat scroll 0 0 white;
box-shadow: 0px 10px 10px 2px #888;
float: left;
margin: 0 12.3%!important;
position: relative;
width: auto;
}
#secondary {
float: right;
margin-right: 15%;
width: 22%;
position: relative;
padding-top: 170px;
}
The website is build on wordpress so main starts in header.php and ends in footer.php. The primary and content divs start and end in each page template and the secondary div is called in each page template (get sidebar) after the primary div ends.
The problem is that the content div stops right after the primary div ends, while the secondary div goes on extending below. The content div should extend until the end of the document where the secondary or main div ends.
You can view the code live and the problem it's causing on this website.

Answer 1

Its because of float
give overflow property to your parent.
or create an extra div and give clear:both
One of the common problems we face when coding with float based layouts is that the wrapper container doesn't expand to the height of the child floating elements.The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new CSS trick either. It's been documented before long long ago.

Answer 2

I think the problem is that the 'secondary' element isn't contained within the 'content' element' on your site so obviously 'content' won't grow to accomodate 'secondary'.
You need to have a rethink of your html structure.

Answer 3

Parent elements are never to expand to contain floated elements. To have that element expand to contain them, you add overflow: auto to the parent so the floated element overflowing the element will be contained in most cases. I was unable to find an element to apply that to so you may have done other things to cause this. position:absolute has the same issue where it is taken out of the normal flow and parent elements will not contain them.

Answer 4

The clear property in css needs to be applied to a new div in your code. It works by starting the div below all floating elements within the parent element. It would look something like this:
<div id="main">
<div id="primary">
<div id="content" role="main">
</div>
</div>
<div id="secondary">
<div>
<div style="clear: both"></div> <!-- Don't do inline styles -->
</div>
That should do it. You also should take out the clear: both on #main's CSS. It's not necessary.