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

Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points
Posted by Phil White
Phil White
Courses Plus Student 9,519 Points

Footer wont stick to the bottom of the page...

Hi,

I'm just making a basic site and the footer wont stick to the bottom of the page, it rides up and sits under the third column. My html and CSS is below.

How do i fix?

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points 
!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Phil White | Project V1</title>
</head>
<body>
    <div>
        <header class="top-bar">
            <a href="index.html" id="logo"></a>
            <div id="main-nav"> 
                <h1>Phil White</h1>
            <nav> 
                <ul>
                    <li class="portfolio"><a href="index.html">Portfolio</a></li>
                    <li class="about"><a href="#">About</a></li>
                    <li class="contact"><a href="#">Contact</a></li>
                </ul>
            </nav>
    </div>
        </header>
        </div>
                <div id="main-header">
                    <h1>Welcome to Project V1</h1>
                </div>
                    <div class="container">
                        <div id="column-1" class="even-height">
                            <h2>Column One</h2>
                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu enim dapibus, convallis nisi a, auctor risus. Integer interdum dolor id magna luctus, a euismod odio commodo. Aenean at lacus vitae lorem pulvinar porttitor eget eget tellus. Vestibulum nibh erat, ullamcorper sed mauris in, hendrerit egestas mi. Sed hendrerit sagittis ipsum. Sed et mauris et enim vehicula luctus sed ut lacus. Fusce eu faucibus nunc, vel gravida nunc. Ut ornare mattis nibh non imperdiet. Fusce in vulputate nunc. </p>
                                    <a href="img/eifel-tower.jpg">
                                    <img src="img/eifel-tower.jpg" class="eifel" alt="Eifel Tower"> 
                                    </a>  
                        </div>

                        <div id="column-2" class="even-height">
                            <h2>Column Two</h2>
                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu enim dapibus, convallis nisi a, auctor risus. Integer interdum dolor id magna luctus, a euismod odio commodo. Aenean at lacus vitae lorem pulvinar porttitor eget eget tellus. Vestibulum nibh erat, ullamcorper sed mauris in, hendrerit egestas mi. Sed hendrerit sagittis ipsum. Sed et mauris et enim vehicula luctus sed ut lacus. Fusce eu faucibus nunc, vel gravida nunc. Ut ornare mattis nibh non imperdiet. Fusce in vulputate nunc. </p>
                                    <a href="img/maldives.jpg">
                                    <img src="img/maldives.jpg" class="maldives" alt="Maldives">
                                    </a> 
                        </div>

                        <div id="column-3">
                            <h2>Column three</h2>
                                <img src="img/activeden-ad.png" class="active-den" alt="Active den">
                                <img src="img/audiojungle-ad.png" class="audio-jungle" alt="Audio jungle">
                                <img src="img/themeforest-ad.png" class="theme-forest" alt="Theme forest">
                                <img src="img/graphicriver-ad.png" class="graphic-river" alt="Graphic river">

                        </div>

        <footer>
            <p> &copy; 2014 Phil White</p>
        </footer>
    </div>
</body>     
</html>
Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points 
header {
    width: 1115px;
    height: 100px;
    background: -webkit-radial-gradient(#9a9a9a, #686868);
    box-shadow: 0 2px 7px #04b0f7;


}

#main-header h1 {
    clear: both;
    margin-left: 400px;
    padding-top: 75px;
    padding-bottom: 100px;
    color: #414141; 

}


h1 {
    margin-bottom: 0;
    margin-left: 10px;
    float: left;
}

h1 {
    color: #04b0f7;
}

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

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block; 
}

nav a {
  font-size: 16px;
  padding: 15px 10px;
  text-align: center;
  color: white;
  text-decoration: none;
  transition-property: color;
  transition-duration: 2s;
  padding-left: 20px;
  padding-right: 20px;
}

nav a:hover {
    color: #05b3fb;
}

.portfolio {
    background-image: url('../img/nav-icon-blue1.png');
    background-repeat: no-repeat;
    background-size: 19px;
}

li.portfolio {
    padding-left:10px;
}

.about {
    background-image: url('../img/nav-icon-blue2.png');
    background-repeat: no-repeat;
    background-size: 19px;
}

li.about {
    padding-left:10px;
}

.contact {
    background-image: url('../img/nav-icon-blue3.png');
    background-repeat: no-repeat;
    background-size: 19px;
    padding-right: 0px;
}

li.contact {
    padding-left: 5px;

}

li {
    clear: both;
}

.contact{
    clear: both;
}
 body {
    background-color: white;
 }

h2 {
    clear: both;
}

p {
    clear: both;
}

/** Columns **/

.container {
    clear: both;
    -webkit-column-count: 3;
    -webkit-column-gap: 75px;
}

.container .even-height {
   float: left;

}

#column-1{
    margin-left: 50px;
}

#column-2{
    margin-right: 50px;
}

#column-3 {
    margin-right: 50px;
}

#column-1 p {
    color: #05b3fb;
}

#column-2 p {
    color: #05b3fb;
}

#column-1 h2 {
    text-align: center;
    color: #414141; 
}

#column-2 h2 {
    text-align: center;
    color: #414141; 
}

.eifel {
    border-radius: 100%;
    margin-left: 30px;
    width: 250px;
    height: 250px;
}

.maldives {
    border-radius: 100%;
    margin-left: 30px;
    width: 250px;
    height: 250px;
}

footer {
    height: 100px;
    text-align: center;
    background-color: #777777;
    color: #05b3fb;
    box-shadow: 0 -2px 7px #04b0f7;
}

footer p {
    font-size: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
}

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Phil,

You're using multi-column layout here and since your footer is inside the .container div it becomes part of the multi-column layout.

So one solution would be to move your footer after that div.

However, I would recommend against using multi-column layout. Support isn't high enough yet in my opinion. http://caniuse.com/multicolumn

Looking at that link you can see that you need to use both the -moz and -webkit prefixes as well as the unprefixed version to even get the 86% support and most of that is only partial support. You won't be able to control where the columns break.

I don't think that this was the intended use for this feature. It's more appropriate for newspaper or magazine style layout or maybe if you had a really long ordered list and wanted to flow it into multiple columns.

I would look for another way to layout your 3 columns. You could give them all a width and float them for example.

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

Hi Jason,

Thank you for your help! i did as you said and its working perfectly now.

Philip Cox
Philip Cox
14,818 Points
Philip Cox
Philip Cox
14,818 Points

Hi Phil Here is a good article by Chris Coyer from CSS Tricks. This should help you. The only issue with sticky footers, is they require you to set the height of the page. Using % get around this, as Chris does. You could always have the footer use up the remainder of the page. This looks nice if you have a full width sections on your page with nice colour contrasts. Like the way Nick does it in the first 'how to make a website' course. Hope this helps :)

Phil White
PLUS
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

Thanks Philip, i think you forgot to put the link in the comment?

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

This didn't really help. is there any other fixes?

Philip Cox
Philip Cox
14,818 Points
Philip Cox
Philip Cox
14,818 Points

Sorry about that. I don't normally stick my footer, so not to sure. Maybe try creating a new project file and getting Chris;s example to work. Then implement your html into it?

Phil White
Phil White
Courses Plus Student 9,519 Points
Phil White
Phil White
Courses Plus Student 9,519 Points

I don't think i'm necessarily trying to make a sticky footer but just want the footer to stay on the very bottom of the page like any basic site. and yeah ill try that

Philip Cox
Philip Cox
14,818 Points
Philip Cox
Philip Cox
14,818 Points

This may be rather opinionated but, blocky layouts with lots of rectangles are not as common or popular as they once were. I try to think of my content as sections of content spanning the entire width of the page with a maximum width. If you have enough content to fill a single view in height, great, your footer is down at the bottom below your content. If you only have enough content so far to fill a 1/3 of your height, and your trying to force a footer to the bottom ( you can do this with a negative margin-top ) Then you will have lots of space in-between. And, when you add more content that space remains the same. Not setting a height allows your page to grow as you add content. So place your footer below your content with some once padding and margin, and fill the below space t match the same colour, this way it looks like one large footer. This of course is one way, and it's down to personal preference and design. :)