Footer help

Hello,

absolutely positioned elements do escape page flow but they respect the parent container’s position if they have none declared.

Try this:

#site-generator {
position: absolute;
background-image: url('http://www.geimaku.com/wpcontent/uploads/2012/06/footer-bg.png');
width: 100%;
margin: auto;
left: 0;
}

You’ll still have the horizontal scroll bar because padding is added to the box size, and your box is set to 100% width.
You can fix this by using this code:

#site-generator {
position: absolute;
background-image: url('http://www.geimaku.com/wpcontent/uploads/2012/06/footer-bg.png');
width: 100%;
margin: auto;
left: 0;
padding: 10px 0;
}

If you wish the element to hover while the page scrolls, use fixed position instead, and set vertical position:

#site-generator {
position: fixed;
background-image: url('http://www.geimaku.com/wpcontent/uploads/2012/06/footer-bg.png');
width: 100%;
margin: auto;
left: 0;
bottom: 0;
padding: 10px 0;
}

Let me know if you run into any issues.

Anytime 🙂