My footer keeps moving after updating other parts of my code. How do i fix this?


Tags: html,css

Problem :

How do I keep my footer at the bottom of my page? I have searched through stackoverflow and nothing seems to fix it. The footer coninues to move all over the place but never ends up on the bottom Please Help.

    <!DOCTYPE HTML>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="dereke.css"/>
    <title>

    </title>
</head>

<body>
    <div class="Header">
        <p>Ohio State Buckeyes</p>
        <div id="logo">
            <img src="http://vignette2.wikia.nocookie.net/logopedia/images/6/6f/1000px-Ohio_State_Buckeyes_logo_svg.png/revision/latest?cb=20130425230958" />
        </div>
        <div id="navbar">
            <ul>
                <li>Home</li>
                <li id="noUD">|</li>
                <li>About Us</li>
                <li id="noUD">|</li>
                <li>Contact Us</li>
            </ul>
        </div>
    </div>
    <div class="MidBody">
        <div id="leftbody">
            <img src="http://printableteamschedules.com/images/collegefootball/ohiostatebuckeyesfootballschedule.gif" />
        </div>
        <div id="rightbody"></div>
        <div id="lowerbody">
            <img src="http://grfx.cstv.com/schools/osu/graphics/facilities/stadium-night-800x325.jpg" />
        </div>
    </div>
    <div class="footer"></div>

</body>

</html>

I know the problem is in the CSS:

    .Header {
    width: calc(100%-16px);
    height: 150px;
    border-radius: 5px;
}
.Header p {
    color: white;
    margin-top: -5px;
    width: 600px;
    font-size: 70px;
}
.MidBody {
    background-color: #141414;
    width: 100%;
    height: 850px;
    margin-top: 10px;
    border-radius: 5px;
    position: absolute;
    display:block;

}
.footer {
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    width: 100%;
    margin-top: -3em;
    background-color: #CCCCCC;
    border-radius: 5px;
}
#leftbody {
    width: 49%;
    height: 425px;
    left: 0;
    margin-top: 3px;
    margin-left: 3px;
    position:absolute;
    z-index: 1;
    border-radius: 5px;
}
#leftbody img {
    width: 490px;
    height: 420px;
    border-radius: 5px;
    margin-top: 2px;
    margin-left: 2px;
}
#rightbody {
    background-color: #F1F1F1;
    width: 49%;
    height: 425px;
    right: 0;
    margin-top: 3px;
    margin-right: 3px;
    position:absolute;
    z-index: 1;
    border-radius: 5px;
}
#lowerbody {
    width: 99%;
    height: 49%;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 432px;
    margin-bottom: 2px;
    border-radius: 5px;
    postion: relative;
}
#lowerbody img {
    width: 800px;
    height: 325px;
    border-radius: 5px;
}
body {
    background-color: black;
}
li {
    display: inline;
    padding: 1px;
    text-decoration: underline;
}
#navbar {
    width: 350px;
    color: #F8F8F2;
    font-family: Arial Black;
    margin: -35px;
    text-align: left;
    line-height: 10px;
}
#noUD {
    text-decoration: none;
}
#logo img {
    margin-top: -150px;
    margin-right: 50px;
    width: 15%;
    height: 15%;
    float: right;
}


Solution :

You define position: absolute; on .MidBody, #rightbody, and #leftbody, which removes them from the document flow and allows the footer to drift up to the navigation links. Change these to position: relative; and remove the top, left, bottom, and right attributes from them, as these only apply to position: absolute elements.

You also misspelled position in #lowerbody.

Additionally, the static height property set on .MidBody, and the margin-top: 432px; on the #lowerbody are causing them to display past your .footer element.

Fixing these things will drop the footer to the bottom of the page (but you'll still have many other formatting problems you'll need to attend to). You can use this JSBIN I set up to continue testing your page formatting until it looks how you want it to.

Good luck.


    CSS Howto..

    How to check if a css rule exists

    How do I set a cell background colour based on its contents using PHP after reading values from MySQL?

    How to maintain hover state even when mouseout of main drop down link

    CSS Overflow: overlay. Is it deprecated? How can I replace it?

    How load a table into multiple webpages using HTML?

    How to make elements appear one by one using css animation

    How to make images to go out of the div when width is over the max-width?

    Show hint over a CSS background image on mouse over

    How to let Materialize use classes for dropdowns and not ID's?

    Setting a revealing onhover behaviour for multiple elements-pairs with only CSS - how come this works?

    How to avoid background image tile when browser window resizes

    How to apply a sifr rule to a hyperlink and also its a.active counterpart

    How to write CSS to convert div elements into a 3 or 4 column table?

    how to make this “div” always visible to users

    How to style this form using CSS?

    How to detect css properties in div

    Difference in css position IE/FF, how to solv my problem?

    How would you style this html so that everything falls into a table?

    How to style a table-like div with css? How to fill a “column”?

    How to add css class on every third post in wordpress?

    How to load dynamic content (get, html, data) via jquery/css in Wordpress?

    How to re-animate CSS3 animations on class change

    how to make RegEx to match CSS non greedy for a part of the match

    How to increase width of Bootstrap container on Max width?

    How to make html elements fire effects on other elements using css

    How do I make a play button for my full page video?

    How to change Kendo Excel Button Content Text

    How to use CSS transition to animate dropdown menu?

    How to show scrollbar when the inner content is aligned to bottom?

    HTML/CSS slight sideways scrollability, how to find source? [closed]