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 CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

Srdjan Cestic
Srdjan Cestic
6,855 Points
Posted by Srdjan Cestic
Srdjan Cestic
6,855 Points

Problem with sticky footer

Why my footer isn't stick to the bottom of the page?

And why instructor start with min-width 769px? Is that necessary or just for practice...? I'm asking this beacuse instructor Nick Pettit start with mobile design also and when he finish and website looks good on mobile devices, then he start with responsive.css file and there add min-width from 480px and so on?

7 Answers

Shaun Moore
Shaun Moore
6,301 Points

Try this :)

.footer-wrap { min-height: calc(100vh - 89px); position:fixed; width:100%; }

ninahemelrijk
ninahemelrijk
4,723 Points

This worked for me, thanks Shaun!

Shaun Moore
Shaun Moore
6,301 Points

No Worries!

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

Try watching his video again because looking at your coding you have missed a few steps out and your DIV's are in the wrong places

https://teamtreehouse.com/library/css-layout-basics/getting-started-with-css-layout/creating-a-sticky-footer

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points

Try position:fixed

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

Nothing change. I don't post my workspace link, sorry fo that, here it is : https://w.trhou.se/niujbmuxlj

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

I add this, nothing changed...Can you try to answer on my second question? Thanks

Diwesh Saxena
Diwesh Saxena
15,512 Points
Diwesh Saxena
Diwesh Saxena
15,512 Points

No I am having the same problem as Srdjan Cestic .....

This is my style.css

/* ================================= 
  Base Element Styles
==================================== */

* {
  box-sizing: border-box;
}

body {
    line-height: 1.6;
    color: #3a3a3a;
}

p:last-child {
    margin-bottom: 0;
}

a { 
    color: #fff;
    text-decoration: none;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
  margin: 0;
}

/* ---- Layout Containers ---- */

.container {
  padding-left: 1em;
  padding-right: 1em;
}

.main-header {
    padding: 1.5em 0;
    background: #3acec2;
}

.main-footer { 
    text-align: center;
    padding: 2em 0;
    background: #d9e4ea;
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 769px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

    .container {
        width: 70%;
        max-width: 1000px;
        margin: 0 auto;
    }

}

And this is my index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="wrap">
        <header class="main-header">
            <div class="container">
                <h1 class="name"><a href="#">Best City Guide</a></h1>
                <ul class="main-nav">
                    <li><a href="#">ice cream</a></li>
                    <li><a href="#">donuts</a></li>
                    <li><a href="#">tea</a></li>
                    <li><a href="#">coffee</a></li>
                </ul>
            </div>
        </header>

        <div class="container">
            <h2>Welcome!</h2>
            <p>Everything in this city is worth waiting in line for.</p>
            <p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
            <p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
        </div>
    </div>

    <footer class="main-footer">
        <span>&copy;2015 Residents of The Best City Ever.</span>
    </footer>
</body>
</html>
Brian Pritt
Brian Pritt
3,741 Points

I know that this is a really late reply, but are you making sure that yourbrowser window is greater than 769px. If you have it in a smaller window, say half your screen if you are working with two windows open, these rules won't apply.

Srdjan Cestic
Srdjan Cestic
6,855 Points
Srdjan Cestic
Srdjan Cestic
6,855 Points

Thanks Diwesh Saxena for sharing your code and help.

Sorry for late reply.