Your clearer is in the wrong place. It should be down one level as shown here:
<!-- ends .wrapper -->
[B]<div class="clrflt"> </div>[/B]
<!-- ends .container -->
<!-- ends .mainContainer -->
You would be better of using either the clearfix technique or apply overflow:hidden to the appropriate containers (assuming you don't need visible overflow) (see faq on floats).
Your maincontainer should also have haslayout or is likely to break in Ie6/7.
border-bottom:1px solid #afb5bb;
width:100%;/* haslayout ie (and clear floats in ie)*/
overflow:hidden;/* clear floats everywhere else*/