Make sure #bottom div clears absolute positioned boxes

Question

http://jsfiddle.net/emcniece/u5Btt/3/

How do I get the #bottom div to clear the absolutely positioned .child divs?

I know there's got to be a thousand questions out there like this, I looked and tried stuff and didn't find a solution. Easy credits for somebody...

Answer 1

Absolutely positioned elements are removed from the document flow. Since your .child divs are absolutely positioned, the #container div is treated as if it were empty and collapsed.

If you explicitly add height to your #container div, you will be able to 'clear' the #bottom div.

Answer 2

There's no such thing as clearing absolutely or relatively positioned items in HTML+CSS. Clearing items is just for floaters. By definition, an item positioned absolutely does not interact with the positioning of other items. Relative positioning is the same, except that the offset point is not the origin (0,0), but rather the point from which it originally appears.