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.