Search code examples
cssajaxhtmlpositionpositioning

Positioned div element doesn't flow/update after ajax elements are added

I have a footer element that is included with php at the bottom of the page:

<footer>
    <h5>Title</h5>
    <h6>&copy Copyright 2012</h6>
</footer>

footer{
    width:100%;
    height:40px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    background-color:#EEE;
    text-align:center;
    position:absolute;
    bottom:0;
}

This works as expected aligning the footer to the bottom. The issue comes from the fact that data in the main section of the page is loaded via AJAX call and the footer simply stays positioned where it was before ajax elements were added. movieBox element is empty by default and is populated with multiple divs when ajax call is returned.

<div id="movieBox"></div>
<br style="clear:both"/>

Is there a css only way to fix this issue? Any other method? Thanks for any help.

Solution

  • You are absolutely positioning the footer, that means no matter what content is loaded via AJAX, it will stay in the same place. You need to change your layout so you aren't relying on position: absolute.