footer always in bottom with this style

[Sandro87]

Hello,
I have problems getting my footer always in the bottom of the page no matter what the content height. If I have this everything is fine

<div id="container"> //relative. min-height 100%
<div id="center"></div> // padding-bottom 100px,
<div id="footer"></div> // bottom:0; absolute, height: 100px
</div>

but when I add these other DIVs in #center with "floats" the footer would just not consider the #center in the #container div anymore

<div id="container"> //relative, min-height 100%
<div id="center"></div> // padding-bottom 100px, float:left
<div id="center_left"> </div> // float:left
<div id="center_right"></div> // float:right
<div id="footer"></div> // bottom:0; absolute, height: 100px, clear:both
</div>

It has to do with the floats IN #center div, if I try to delete float:left from #center (except from the fact that if I delete it #center won't include center_left and center_right anymore, never understood it, why?) the footer will always stop in the 100% height on the browser page and the #center content will continue behind and down.
Is there a way to do it or I just cant use the "float:" to do this?
With the last configuration if deleted every float element the footer will go down

[choster]

When you apply a float, the block gets removed from the flow. Try applying overflow:auto to #container.

[Sandro87]

PERFECT it worked, thanks