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>

Lowndes

absolute positioned elements are not floated elements hence there's nothing like clearing them.. – Averill

I would also say that there's no way of doing this wihtout JavaScript. – Gymnasiast

I see. But you understand what I'm after when I mean "clear"? A behavior to put the next parent below previous content. – Lowndes

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.

Anemology

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/

Cigarette

I'm very familiar with how to approach a regular structure but for this scenario I need these elements to be absolutely positioned. I decided to go for a JS solution instead. – Lowndes

@StaffanEstberg if is still possible, could you post your js solution? – Decumbent

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;
}

Gabriellia

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;
}

Benedikt