Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by olu adesina
olu adesina
23,007 Points

why is my footer not at the bottom of the page

/*********************** General *************************/

wrapper{

max-width: 940px;
margin: 0 auto;
padding: 0 5%;
background: green;

}

img{ max-width: 100%; }

/* site body*/

body{ background: white; color: #999; font-family: Indie Flower; }

a{ text-decoration: none; }

wrapper{

max-width: 940px;
margin: 0 auto;
padding: 0 5%;
background: green;

}

/*********************** HEADING ****************/

logo{

    text-align: center;
    margin: 0;

}

h1{ margin: 15PX 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em;

}

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; } /***************** navigation *****************/

nav{ text-align: center; padding:10px 0; margin: 20px 0 0; }

/***************** footer ***************/ footer{ font-size:0.75em; text-align: center; padding-top: 50px; color: #ccc; } /************* portfolio ***************/

gallery{

margin: 0;
padding:0;
list-style: none;

}

gallery li{

float: left; width: 45%; margin:2.5%; background:#f5f5f5; color: #bdc3c7; }

/*************** colors ***************/ a{ color: green; }

header{ background: green; border-color: #599a68; }

h1,h2{ color: #fff; }

nav { background: darkgreen; }

nav a, nav a:visited { color:white; }

nav a.selected, nav a:hover { color: gray; }

html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Olu Adesina| webDesigner</title> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet"> </head> <body> <header> <a href="" id="logo"> <h1>Olu Adesina</h1> <h2>Web Developer</h2> </a> <nav> <ul> <li><a href="http://oluadesina.co.uk" class="selected">Portfolio</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="images/olu.jpg"> <img src="images/olu.jpg" alt="olu"> <p>this is what I look like</p> </a> </li> <li> <a href="images/olu.jpg"> <img src="images/olu.jpg" alt="olu"> <p>this is what I look like</p> </a> </li> <li> <a href="images/olu.jpg"> <img src="images/olu.jpg" alt="olu"> <p>this is what I look like</p> </a> </li> <li> <a href="images/olu.jpg"> <img src="images/olu.jpg" alt="olu"> <p>this is what I look like</p> </a> </li>

      </ul>
    </section>
</div>



<footer>
    <p>&copy; Olu Adesina 2017</p>
    <a href="https://twitter.com/olutherockboy"><img src="images/twitter.png" alt="twitter"></a>
    <a href="https://facebook.com/olu.adesina?ref=bookmarks"><img src="images/facebook.png" alt="facebook"></a>
</footer>

</body> </html>

1 Answer

James Bray
James Bray
8,466 Points
James Bray
James Bray
8,466 Points

Hello Olu,

Each top element within a page will sit on on top of another in the order you have them in your HTML – Unless you specifically style an element to do otherwise.

Your current website displays your footer directly below your div (.wrapper), which is technically at the bottom of the page in terms of order of elements. If however you want the footer to be stuck to the bottom of the viewport, you need to apply the styles to do so.

One way you could do this would be to position in absolutely;

footer {
    font-size: 0.75em;
    text-align: center;
    padding-top: 50px;
    color: #ccc;
    position: absolute;
    bottom: 0;
}

This will position the footer at the very bottom of the viewport.

If you would like more control over this, you could set a height of a parent element, and give that parent element a css position: relative; This will absolutely position your footer within the parent. As an example you could position the footer within it’s parent element of body.

html, body {
    margin: 0;
    height: 100%;
    padding: 20px; // Ive added this so that you can see the effects of positioning within a relatively positioned element.
}

footer {
    font-size: 0.75em;
    text-align: center;
    padding-top: 50px;
    color: #ccc;
    position: absolute;
    bottom: 0;
}