Clear absolutely positioned elements with CSS possible?
css, css-position, html
Solution
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.
Problem
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> ```