Staffan Estberg Staffan Estberg - 7 days ago 6
CSS Question

Clear absolutely positioned elements with CSS possible?

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

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.