Absolute positioning of div without overlapping div above

Question

I have a div that I wish to position at the bottom of the webpage. I can achieve this using position:absolute. However, I don't want it to overlap the div above when the window is made smaller. This was achieved by changing it to position:relative however as expected it does not stay on the bottom of the page on bigger screens.

Is there a way in which this is possible?

Current CSS

position:relative; 
bottom:0; 
background-image:url('.......'); 
background-repeat:repeat-x; 
background-position:bottom;
width:100%;

An example of what I was explaining.

Answer 1

As for me, the best idea is through creating a container DIV for all page content (stretch it to fit all screen using popular practices). Then you can put your footer to the bottom of this container by setting position: absolute and bottom: 0, and don't forget to set padding-bottom: height of your footer to the container. This will prevent overlapping your footer by content of the page.