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

Arturo Espinoza
Arturo Espinoza
9,181 Points
Posted by Arturo Espinoza
Arturo Espinoza
9,181 Points

Help with footer please

Hello all, I am having an issue with my footer. It looks good and when page has no content it's at the bottom but once I put content into the body and wrap it, my footer move to the center of the page. Please help.

http://jsfiddle.net/8yhjw365/

Branko Zivanovic
Branko Zivanovic
2,684 Points
Branko Zivanovic
Branko Zivanovic
2,684 Points

Just remove absolute positioning from both wrapper and footer.It has no clear purpose to be there.

Jesus Mendoza
Jesus Mendoza
23,288 Points
Jesus Mendoza
Jesus Mendoza
23,288 Points

Remove the position: absolute from the wrapper and the footer.

Elements with position absolute are positioned relative to the parent element if this has relative position, if it does not have it, then it's parent will be the window of your browser, that's why when you add bottom 0; it stays at the bottom 0 of your window browser size.

If I didn't explain myself well, try learning more about positioning in css.

2 Answers

Arturo Espinoza
Arturo Espinoza
9,181 Points
Arturo Espinoza
Arturo Espinoza
9,181 Points

I did remove them and when there is no content the footer disappears. When there is content the footer goes to the center of the page.

Abdul Zainos
Abdul Zainos
4,938 Points
Abdul Zainos
Abdul Zainos
4,938 Points

I tested this code out and it should solve your styling issue, the content inside your footer needs work though. Edit: I just looked at your HTML, you have your divs inside the footer, when the should be wrapping them around your footer. I mean you can already style the footer without an ID/Class tag. Just call out the html tag and that should suffice.

#wrapper {
  position: relative; /*Changed*/
  color: #000;
  padding: 32px;
  background: rgba(70,70,70, .1);
  min-height: 587px;
  width: 85%;
  margin: 120px 7.5% 50px 7.5%;
  display: block; /*Changed*/
}

#footer {
  clear: both;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 70px;
  position: relative; /*Changed*/
  text-align: center;
  z-index: 999;
  display: block; /*Changed*/
}