Search code examples
htmlcssheaderfooter

Header/Footers appearing in wrong position


could someone tell me why the Footer appears at the top of the page, and I can't see the Header or LayoutDiv9?

This is the second CSS sheet I have added, the first is the Fluid Grid Layout CSS sheet that was automatically added and that I haven't altered at all.

@charset "utf-8";
/* CSS Document */

#Header {
    position: fixed;
    height: 75px;
    margin-top: 0;
    width: 100%;
    z-index: 10000;
    background:#FFF
}

#LayoutDiv1 {
    position: fixed;
    height: 30px;
    margin-top: 75px;
    width: 100%;
    z-index: 10002;
    background:#FFF
}

#LayoutDiv3 {
    margin-top: 105px;
    width: 100%;
    z-index: 10004;
    background:#FFF
}

#LayoutDiv9 {
    position:fixed;
    height: 30px
    margin-bottom:40px;
    z-index:10006;
    background:#FFF
    }

#Footer {
    position:fixed;
    height: 40px
    margin-bottom:0;
    z-index:10008;
    background:#FFF
    }

Any help would be greatly appreciated. Thankyou!


Solution

  • you must use top instead margin-top and bottom instead margin-bottom like this:

    #Footer {
        position:fixed;
        height: 40px
        bottom:0;
        z-index:10008;
        background:#FFF
        }