Clear absolutely positioned elements with CSS possible?

Question

Is there any way to clear absolutely positioned elements with CSS? I'm creating a page where I need each part of the site (section element) to be absolutely positioned, and I want to apply a footer with content below those elements.
Tried to relatively position the header and footer to see if a total height would be taken into account but the footer still gets "trapped" underneath the section elements. Any ideas?

<header style="position: relative;"></header>

<div id="content" style="position: relative;">

    <section id="a" style="position: absolute;"></section>

    <section id="b" style="position: absolute;"></section>

    <section id="c" style="position: absolute;"></section>

    <section id="d" style="position: absolute;"></section>

    <section id="e" style="position: absolute;"></section>

</div>

<footer style="position: relative;"></footer>

Answer 1

Absolutely-positioned elements are no longer part of the layout - parent items have no idea how big absolutely-positioned child elements are. You need to set the height of "content" yourself to ensure it does not overlap the footer.

Answer 2

Don't use absolutely-positioned elements for layouts since that elements are removed from normal flow and no longer affect elements around them. And they're not affected by other elements.

Use absolute-positioning to move elements within a container when conditions allow.

For floated elements I suggest you to use a specific clearing technique called clearfix. I use it religiously.

http://nicolasgallagher.com/micro-clearfix-hack/

http://jsfiddle.net/necolas/K538S/