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/

Answer 3

Had same question, made all absolute positioned, but let the first one be relative, as for responsive layout where height does change, it did help to keep track of the elements height changes, notice in this case all elements have same height:

.gallery3D-item {
    position: absolute;
    top: 0;
    left: 0;
}
.gallery3D-item:first-of-type {
    position: relative;
    display: inline-block;
}

Answer 4

I discovered a easy solution to this, it might not cover all possible problems but at least it solved my problem.

HTML:

<p>Content before</p>
<div class="offset-wrapper">
    <div class="regular">
        <img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
    </div>
    <div class="special">
        <img src="https://www.gravatar.com/avatar/bdf0bf75e96fa18e57769865ebeb9a6e?s=48&d=identicon&r=PG" />
    </div>
</div>
<p>Content after</p>

CSS:

.offset-wrapper {
  background: green;
  position: relative;
  width: 100px;
}
.offset-wrapper .regular {
  visibility: hidden;
}
.offset-wrapper .special {
  bottom: -15px;
  left: -15px;
  position: absolute;
}