I'm working on the page: http://starbuckrealtygroup.com/template-wide.php

The grass is supposed to be a background image positioned on the bottom. However, there is space showing below it. When I try to locate the problem with Firebug, the space is no longer there. How can I get the grass to show at the bottom of the page with no space underneath?

Thanks!

The problem is that your wrapper isn't big enough to reach the bottom of the screen, since you don't have much content at the moment. But if you bring up firebug (or just resize the window), the wrappers' height will be enough to reach the bottom and it looks as it should.

To fix it, you'll want to add 100% height to body and html, as in

html, body {
    height: 100%;
}

And also add 100% minimum height to the wrapper, as in

.wrap {
    min-height: 100%;
}

And on an unrelated topic, I see no reason why your .content div needs float:left;. You could remove that, and also the clearing div underneath it.

Thanks for your quick response! I tried doing as you suggested and it does keep the grass at the bottom of the page. However, it allows the grass to move to the height of the bottom of the window instead of being say 200px below the content area. (Meaning that the grass shows in the middle of the content box when you make the window that small). Any suggestions?

That is because you set the wrappers' height too 100%, basically locking its size to the size of your window, instead of setting its min-height to 100% which would allow it to grow when needed.

Also, about the note I made about the float:left; on your .content; I just noticed you have that on .wrap and .footer-top aswell. Those too could be removed without affecting the layout, as could the clearing div.

That did the trick!! Thank you so much!!! Your fix actually allowed me to see a flaw on another template of our site (only seen on larger monitors when the screen is zoomed out). Thanks again :-)

You're welcome