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 How to Make a Website Debugging HTML and CSS Problems How to Fix Problems with Code

GAI-EWB Team
GAI-EWB Team
8,934 Points
Posted by GAI-EWB Team
GAI-EWB Team
8,934 Points

Footer at bottom of page

How do I keep my footer at the bottom of the page on my about and contact pages like it is on the portfolio page? Right now the footer on the about and contact pages is in the middle of the screen.

This is my footer css code: 

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #CCCCCC;
}
Elizabeth Hammock
Elizabeth Hammock
6,674 Points
Elizabeth Hammock
Elizabeth Hammock
6,674 Points

use position: absolute;, bottom 0px;

GAI-EWB Team
GAI-EWB Team
8,934 Points
GAI-EWB Team
GAI-EWB Team
8,934 Points

I tried that but then it doesn't clear content and it's not centered.

2 Answers

Bianca Negron
Bianca Negron
9,486 Points
Bianca Negron
Bianca Negron
9,486 Points

There is a possibility that the about and contact page is too short in height, so what'll happen is the page will not scroll, the footer will appear right below your content and there will be white space below your footer. Positioning to the bottom it might give problems when resized or if you decide to add content to it later. If you want a quick fix you can add "position: fixed; width: 100%; bottom: 0; margin-top: 50px;".

Ben Brenton
Ben Brenton
266 Points
Ben Brenton
Ben Brenton
266 Points

GAI-EWB Team,

Is your css clear: both; messing up the css text-align: center; by any chance, due to cascading problems?