Q: creating a JavaScript sticky footer I am trying to create fix position element function where i am trying to force my footer to always stay at the bottom of the page. The CSS properties position: absolute;
    bottom: 0; will not work due to the way my html is structured. click here for an example  
fixed wont work, the red background will be an ajax call - the red block will not have a fixed height also it will be place onto of the div wrapper, if i use fixed position you will notice that the black element will overlap the red block. i basically need the black block to always sit underneath the red block
I know there is a Javascript function which detects where the element should be based on browser size. therefore the footer will stick to the bottom Based on my example can someone provide me with an example? 

A: DEMO
You need to restructure your HTML a little bit. Stick a container div around everything and do the AJAX call in the section contained within in. You would then position: relative your footer in relation to the container and style the container with the red background.
EDIT: work on your question explanation if this isn't what you were looking for

A: Here is some working code, without using js, i just added position:fixed to footer and z-indizies to section and footer, so the footer is on "highest layer"
http://jsfiddle.net/GmNSn/5/
    section{
    position: absolute;
    background: red;
    z-index: 555;
    height: 100%;
    margin: 30px;
    z-index:0;
}

#wrapper{
    height: 100px;
}

.box{
    width: 100px;
    height: 150px;
    background: #ccc;
    margin: 10px;
    display: inline-block;
    position: relative;
}

footer{
    background: #000;
    height: 200px;
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index:1;
}

