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 automatically compile LESS into CSS on the server?

    How to do onclick in CSS to do transition on image?

    How to make a CSS scroll follow div stop follow at a position

    Webpack bundle does not show css

    How can I position two divs on the same line and have them act responsive?

    How to add CSS to a class through jQuery?

    How to get button groups that span the full width of a parent in Bootstrap?

    How to preload large css and javascript files in vanilla javascript

    How to extend width and height automatically when the data gets increased

    How to apply css to php 'echo $tube->error;'?

    How do I programmatically change the CSS link for HTML files in C#?

    Intellij IDEA 11: how can I compile .css from .less?

    How to change text color of a link inside jQuery accordion

    How to force a browser to show the latest changes to a CSS file?

    How can I make an only active on mobile devices?

    How to make a menu centered using CSS

    AngularJS ng-show directive showing elements before hiding elements

    How to have a common header and footer in a HTML CSS web app?

    How to get conditional css to work on Blogger/Blogspot?

    How to use nested p tags in CSS and Bootstrap boxes?

    How to display child elements of
  • at 100% height?
  • How to smoothly animate height in CSS or Javascript on mobile devices

    How to Extend Wrapped Elements to the Full Browser Width Using CSS?

    How can I change the text decoration on numbers only on my web page?

    How to keep sub div from considering height of its cousin?

    How to apply same CSS property without overriding and multiple times using jquery?

    How should I escape image URLs for CSS?

    How to place an image on top of Bootstrap NavBar while keeping links clickable?

    How can I style html/form elements using CSS?

    Some doubts about how make an image clickable using CSS