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

HTML

Posted by Elizabeth Thomas
Elizabeth Thomas
2,287 Points

my footer is floating!

in my contact and index pages, my footer is floating up into the page instead of staying at the bottom of the page. Am I missing something in my code?

</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; 2016 Elizabeth Thomas.</p>
</footer>

</body> </html>

4 Answers

Fluid Advertising
Fluid Advertising
9,416 Points
Fluid Advertising
Fluid Advertising
9,416 Points

The code you posted looks fine except it's not nearly enough to see what your issue is or how to solve it. Can you include a screenshot of the site with the problem along with the complete code for the page?

Johnathan Mercier
Johnathan Mercier
5,527 Points
Johnathan Mercier
Johnathan Mercier
5,527 Points

Its hard to tell without the CSS and the rest of the html code. My guess is that either their are floated elements which need to be cleared, or there is not enough content to push the footer to the bottom.

if you have floated any divs before the footer make sure to clear them in the CSS

footer {
  clear: both;
}

Also you can try this method. Simply add it to your wrapper div if you have one. you need to adjust the px value to match your footers height. 

.wrapper {
  min-height: calc(100vh - 120px);
}

for example:

<!DOCTYPE html>
<html>
    <head lang="en">
        <title>Accounting Services - Home Page</title>
        <meta name="viewport" content="width=device-width">
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsiveNav.css">

        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700|Montserrat:400,700' rel='stylesheet' type='text/css'>

    </head>
    <body>
        <div class="wrapper">

            <!-- start header -->
            <header class="main-header">
                <a class="siteLogo" href="index.html">
                    <img src="img/headerLogo.svg" alt="Accounting Logo" />
                </a>

                <nav>
                    <ul class="nav">
                        <li><a href="index.html" class="selected">Home</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="usefulLinks.html">Links</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </header>
            <!-- end header -->

            <!-- Start Main Content and Banner -->
                <div class="banner">
                </div>
                <div class="container">
                    <section class="primary">
                        <h1>Welcome</h1>
                        <p>content message</p>

                    </section>
                    <section class="secondary">
                        <h1>Information</h1>
                        <p>content message</p>

                        <h2>Contact Info:</h2>
                        <p></p>

                        <h2>Hours of Operation:</h2>
                            <p>Mon-Fri</p>

                    </section>
                </div>
                <!-- End Main Content and Banner -->

        </div>

        <!-- Start Footer -->
        <footer>
            <p>&copy; Copyright 2009-2016 Accounting</p>
            <p><a href="index.html">Home</a> | <a href="services.html">Services</a> | <a href="about.html">About</a> | <a href="usefulLinks.html">Links</a> | <a href="contact.html">Contact</a> | <a href="#.html">Privacy</a> | <a href="#.html">Legal</a></p>
        </footer>
        <!-- End Footer -->

    </body>
</html>

Notice how the wrapper tag contains the header and all of my other content area except the footer. setting the min-height with the calc method tells the browser if the wrapper does not fill the page to make the wrapper 100% of the browsers view-able height, then subtract the total height of the footer. In essence it forces it to stick to the bottom if the content is not able to. There is another method you can use with CSS Flexbox. You should check into that as well.

saadounalerris
saadounalerris
Courses Plus Student 3,071 Points

I was looking for a way to make the footer stick to the bottom of the page for half an hour now and your solution was the only one I've found that didn't make me scroll the page to see the footer. Big Thanks :)

chrisverra
chrisverra
3,760 Points
chrisverra
chrisverra
3,760 Points

Probably not enough content to push it all the way down. There are fixes for it, not sure if it is the right way but take a look at this.

http://cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Elizabeth Thomas
Elizabeth Thomas
2,287 Points
Elizabeth Thomas
Elizabeth Thomas
2,287 Points

I fixed the problem from all of your great advice! thanks a bunch!