Here is a preview of what I have so far:
![](https://i.stack.imgur.com/xmt3z.jpg)

The red area is part of the design and should always scroll down with the design. So when the content expands, the footer, and that red bar go with it. This should be at the very bottom of the window.

I tried positioning it absolute and it worked perfectly, except when I re-sized my browser and made it smaller, it would stay at the very bottom but would only work when the browser is in full screen.

What I am doing right now is just positioning it relative with top:-120px; and then as you can see, it gives me the extra whitespace that I want to get rid of.

```
footer { height:185px; background:url(../images/footer_bg.png) repeat-x; position:relative; z-index: 0; top:-115px; width:100%; }

```

Not sure what else code to paste, I think that's all everyone needs. The rest is self explanatory. Does anyone have any suggestions on how to approach this? 

My goal is to get it just like the image above except without the whitespace, pushed down at the bottom at all times, even when the browser is re-sized.