Question

I believe that I have incorrectly used a combination of float, margin and background image. The issue is a white gap at the bottom of my screen when viewing html doc.

The desired outcome is to have no white gap at the bottom of the screen – where the background image starts at the bottom.

When viewing the page with following code:

* {outline: solid 1px;}

you can see that there is a line along the bottom which must be the html or body element. Whats the space between that and the bottom of the screen? How do I remove it?

Here is the URL major thanks to anyone who helps me solve this headache: http://tinyurl.com/7ywoqpf

Answer 1

Try

html{
    min-height:100%;
}

Hope this is what you meant.