CODEWITHSUNDEEP
htmlcss
Naveen Niraula
Naveen Niraula

Reputation: 771

Why is my footer scrolling with the page?

Okay I am kind of making my personal website and I am coding it been a few days and I am a beginner and I cannot figure out why my #footer is scrolling along with my webpage. It's a problem because it sticks in the middle rather than at the bottom of my website.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/png" href="icon.png" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>Naveen Niraula | Home</title>
    </head>

    <body>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
        <div id="wrapper">
            <div class="mcont">
                <article class="firstart"><br>
                <h1>How can you do that?</h1>
                <p>What is the use of my website if there is nothing more</p><br>
                </article>
                <div class="test"></div>
            </div>
            <div id="test"></div>
        </div>
        <div id="footer">
            <p class="footer">Copyright &copy; 2014 Naveen Niraula. All Rights Reserved.</p>
        </div>
    </body>
</html>

CSS:

  html, body {
     margin: 0px;
}
nav {
    background-color: #311310;
}
nav ul {
    margin: 0px;
    padding: 10px 0px 10px 100px;
}
nav ul li {
    color: #d9d9d9;
    display: inline;
    padding: 0px 10px;
    font-family: klavika;
    font-size: 14pt;
}
nav ul li a {
    color: #d9d9d9;
    text-decoration: none;
}
nav ul li a:hover {
    color: #ffffff;
}
#wrapper {
    margin: 0px 100px 0px 100px;
    background-color: #ebebeb;
}
.mcont {
    margin: 0px 5px;
    font-family: dejavu;
}
.firstart h1, p {
    margin: 0px;
}
#footer {
    padding: 5px;
    background-color: #009688;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.footer {
    padding: 0px 0px 0px 100px;
    color: #333333;
    font-family: condensed;
}
#test {
    height: 1000px;
    background-color: #008080;
}

For making my question more clear I have attached a screenshot of my website down below please check that out.

Oh and yeah that <div id="test"></div> is just for testing out the footer.

Snap of my website

Upvotes: 0

Views: 782

Answers (6)

user2787009
user2787009

Reputation: 11

You can set the footer with position:absolute; and add bottom:0; or you could change it to position:relative;

#footer {
   position:absolute;
   bottom:0;
}

OR

#footer {
   position:relative;
}

Upvotes: 0

senectus
senectus

Reputation: 419

http://jsfiddle.net/hzerfwum/

You need to set your html element to position relative and minimum 100% height, so when your footer is absolutely positioned and set to bottom:0 it will truly go to the bottom.

html {
    position:relative;
    min-height:100%;
}

Then you can set a height to the footer:

#footer {
   width:100%;
   height:100px;
   position:absolute;
   bottom:0;
}

And offset the height of the footer with the same amount of bottom padding to the body:

body {
   padding-bottom:100px;
}

This technique is known as "sticky footer". The footer will always stay to the very bottom of the page, no matter how much content there is.

Upvotes: 1

Zeshan Khan
Zeshan Khan

Reputation: 294

For bottom you have to set the height of id footer and for center make width. Then make bottom 0px.

Upvotes: 0

Benjamin
Benjamin

Reputation: 2670

Your footer element is position: absolute so it scrolls when windows scroll since it is absolute to your screen. If you wanna make it fixed just position: fixed;. For your requirement just do the following stuff to your style.

#footer{
  /*position: absolute;removed*/
}

DEMO

Upvotes: 1

imbondbaby
imbondbaby

Reputation: 6411

In #footer

Remove:

position: absolute;

JSFiddle Demo

Upvotes: 1

Albzi
Albzi

Reputation: 15609

You've set #footer to position:absolute; which means it's always going to be absolute to your screen.

Take it away and it will work.

JSFiddle

Upvotes: 4

Related Questions