force a div to contain floated child divs

You need to add overflow: auto to #main:

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

css wordpress html css-float themes

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; }

EDIT 2020:

Since a while now, this simpler solution works just as fine:

#main::after {    content: "";    display: table;    clear: both;}

Also it’s now recommended to use ::after instead of :after to match other pseudo-elements.

css wordpress html css-float themes

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

Here is a working Live Demo

CodeHunter