I have a footer which I'd like to stay at the bottom of the page. I mean, if there is content which creates a scroll bar, it should be after the content. If there is little content, it should be at the bottom of the visible page. At the moment, it breaks if the content is longer than the page, the footer floats near the bottom, in the middle of the content.

My basic structure is like

<div>Header</div>
<div>UL Menu</div>
<div>Content</div>
<div>Footer</div>

Menu and Content are float: left and Footer is position:absolute with bottom:0 but this only puts it at the bottom of the page window, not at the bottom of the page. I found that if I put a clearing div

<div style="clear:both" />

between Content and Footer, then positioned Footer relative, it would at least always be after the content, but not necessarily at the bottom of the screen.

Appreciate any help, I've been staring at this for too long now.

3 answers

4
points
This was chosen as the best answer

You're looking for a CSS Sticky Footer. There are several ways to achieve this, but the one I linked is a good implementation (and it doesn't use an empty "push" div)

Answered almost 7 years ago by Justin Hileman
1
point

aland, just change your footer CSS to the following:

#footer {
background-color:#DFFFAE;
bottom:0;
height:2em;
position:fixed;
text-align:right;
width:100%;
}

You'll notice that all I changed was the position attribute from absolute to fixed. It is that easy.

Answered almost 7 years ago by Abinadi Ayerdis
  • Unfortunately that would cause the footer to overlap the content, where aland stated, "if there is content which creates a scroll bar, it should be after the content." Justin Ryan almost 7 years ago
  • Yes it's true. I've ended up changing a few things so it difficult to remember exactly what fixed it but I think position: relative along with the clear:both is the key. aland almost 7 years ago
0
points

Also, if you use the layout property it will do the same thing.

#footer{  bottom: 0; }
Answered almost 7 years ago by Derek Adair