I want to see if there is anything I don't need in my CSS file for my current layout Here is my link to the JSFiddle and the full screen description.

Note on the full mode screen: the footer is not sticking, but it actually sticks if I check on my browser.

So that is exactly what I want for my layout. I want someone to see if there's anything in my CSS I don't need, or if I am using improperly without affecting the layout that is displayed. 

For example:


Under the Header ID I have a element called top:0; what is this used for and do I actually need it?
Under the Main ID I have margin: 0 auto -50px; I found help from someone, but quite don't understand the theory on it.
Under the Footer ID I have bottom:0; what is this used for as well and do I need it?


HTML:

        &lt;body&gt;
                &lt;div id="page"&gt;

                        &lt;div id="header"&gt;
                        &lt;/div&gt;

                        &lt;div id="main"&gt;
                        &lt;/div&gt;

                        &lt;div id="footer"&gt;
                        &lt;/div&gt;

                &lt;/div&gt;
        &lt;/body&gt;
&lt;/html&gt;


CSS:

/*THIS IS THE CSS CODE FOR WNG WEBSITE*/
html, body
{
        padding:0;
        margin:0;
        height:100%;
        font-size:0.8em;
}
#page
{
        height:100%;
        min-width:960px;
}
#header
{
        position:relative;
        background-color:#115EA2;
        height:100px;
        width:100%;
        top:0;
}
#main
{
        width:1300px;
        background-color:#F1F2F3;
        margin: 0 auto -50px;
        vertical-align:bottom;
        padding: 20px 20px 40px 20px;
        color:#115EA2;
        text-decoration:none;
        height:2000px;
}
#footer
{
        position:fixed;
        width:100%;
        bottom:0;
        height: 35px;
        background-color:#115EA2;
}
Unless your element is fixed or absolutely positioned, top: 0 is doing nothing for you (#header).  Unless your descendant elements are absolutely positioned (or you need to adjust the element's stacking order due to surrounding absolutely positioned elements), you probably don't need position: relative either.

The negative margin on #main is doing nothing for you (margin: 0 auto gives identical results).  Generally, you use negative margins to nudge things around similar to relative positioning, but where it effects the position of everything that follows as well (eg. an element with margin-top: -50px will move up 50px and so will everything below it, but an element that's relatively positioned with a top: -50px will only shift that element up and not the following elements).

vertical-align: bottom isn't doing anything for you either (#main).  The vertical-align property only works on inline or table-cell elements.

It's not really a good idea to set fixed heights on elements that will have an unknown amount of content (#main).  Scrollbars give users clues as to how much content there is on the page.  It can be confusing to the user when they scroll and scroll, but there's no more content to find.  If the content is longer than you've allowed for, it will spill out of the container or get clipped off (depending on the element's overflow setting).

If you want your footer to be at the bottom of the viewport, then yes, you need bottom: 0.