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 How to Make a Website Creating HTML Content Build the Footer

Esteban Correa
Esteban Correa
1,824 Points
Posted by Esteban Correa
Esteban Correa
1,824 Points

My Footer is going Up! how can I fix it??

My Footer is going Up! how can I fix it??

2 Answers

Alan Mattanó
PLUS
Alan Mattanó
Courses Plus Student 12,188 Points
Alan Mattanó
Alan Mattanó
Courses Plus Student 12,188 Points

Using "fixed" position

"An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled"

So you need to add other styling effects

footer {
  position: fixed;
  background: red;
  bottom: 0;
  left: 0;
  height: 40px;
  with: 100%;
}

" I'm New in css and not and expert"

Daniel Santos
Daniel Santos
34,969 Points
Daniel Santos
Daniel Santos
34,969 Points

I need more information, I need to see your code. But I will assume that you used the 'float' property. In order to prevent this to happen by using the property 'overflow:auto'. It has its repercussion but I don't remember exactly the problem with it, but it works. I think it has to deal with IE. They gave another solution in the CSS course here in Treehouse, but they don't explain it clear. This is an example:

.welcome-div{
    margin-top: 60px;
    overflow: auto;
}
.-column-left{
    width: 400px;
    float: left;
}
.-column-right{
    width: 400px;
    float: right;
}

.welcome-div is a <div class="welcome-div"> which is the block where I have to columns. If I don't apply overflow:auto, the content that follow this two columns will go up.

If this doesn't answer your question, please post you codes so we can see what you are doing wrong.