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 Luke Dunne
Luke Dunne
2,595 Points

How to get my footer to stay at the bootom of the page and not at the bottom of my content

This is following the portfolio build a website project

<body>
        <header>
            <a href="index.html" id="logo">
                <h1>My Name</h1>
                <h2>Web Designer in Location</h2>
            </a>
            <nav>
                <ul>
                    <li><a href="index.html" class="selected">Portfolio</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div id="wrapper">
            <section>
                <ul id="gallery">
                    <li>
                        <a href="img/numbers-01.jpg">
                            <img src="img/numbers-01.jpg" alt="">
                            <p>Experimentation with color and texture.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-02.jpg">
                            <img src="img/numbers-02.jpg" alt="">
                            <p>Playing with blending mode in photoshop.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-06.jpg">
                            <img src="img/numbers-06.jpg" alt="">
                            <p>Trying to create an 80's style of glows.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-09.jpg">
                            <img src="img/numbers-09.jpg" alt="">
                            <p>Drips created using photoshop brushes.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-12.jpg">
                            <img src="img/numbers-12.jpg" alt="">
                            <p>Creating shapes using repition.</p>
                        </a>
                    </li>
                </ul>
            </section>
        </div>
        <footer>
            <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
            <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
            <p>&copy; 2014 My Name,</p>
        </footer>

footer {
  width: 100%;
  background-color: #52a9c6;
  border-top: 5px solid #22749a;
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #22749a;
}

5 Answers

Alexandru Olteanu
Alexandru Olteanu
17,522 Points
Alexandru Olteanu
Alexandru Olteanu
17,522 Points

Hello there! Try this:

footer { position: absolute; bottom: 0; width: 100%; background-color: #52a9c6; border-top: 5px solid #22749a; font-size: 0.75em; text-align: center; padding-top: 50px; color: #22749a; }

Luke Dunne
Luke Dunne
2,595 Points
Luke Dunne
Luke Dunne
2,595 Points

Hi,

Thaks for the reply.

That doesnt work, it pushes my footer up and right in the middle of my second row of images. With the bottom of the page now just after the image comments.

I have taken the footer out of the wrapper div as i want the footer to stretch across 100% of the screen, like my header/navigtaion menu does.

Alexandru Olteanu
Alexandru Olteanu
17,522 Points
Alexandru Olteanu
Alexandru Olteanu
17,522 Points

Hmm... that's strange. I don't have enough time right now, but I've found a good tutorial here. Take a look: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Cheers!

Luke Dunne
Luke Dunne
2,595 Points

I followed this method and changed my HTML div structure to match and CSS to match my changed structure. Still the same thing is happening?

What I need is for the footer to ALWAYS be at the bottom of the content UNLESS the content is not enough to fill the user's screen in which case the footer moves to the bottom of the screen.

Can this be done easily with html5 and css3 or is it usually done with javascript?

Patrick Metcalfe
PLUS
Patrick Metcalfe
Courses Plus Student 7,563 Points
Patrick Metcalfe
Patrick Metcalfe
Courses Plus Student 7,563 Points

You could try position: sticky

Youssef S
Youssef S
4,467 Points
Youssef S
Youssef S
4,467 Points

You might want to add the following to your footer type style footer{position:fixed; bottom: 20px; /* Wherever you want to place it from the bottom*/}.