Footer will not position itself at the bottom of page

Question

I have this footer that will not stick to the bottom of the page.

I think the issue is with my HTML and body not spanning the entire site but I just cannot find the exact place to correct this. I know its a big no-no to link to my page but I simply don't know what code to post here.

I cannot set the content to static instead of absolute because then my menu items will start pushing the content divs around when they open.

See http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom?rq=1 — helderdarocha, Apr 26 '14 at 14:57
There are *many* great examples in the answer above. One of them should suit your needs. — helderdarocha, Apr 26 '14 at 14:58

score 1 · Answer 1 · answered Apr 26 '14 at 15:18

1

To fixed position into bottom you can try this code

Html:

<div class="tofix">
  <p>Fixed this div into bottom</p>
</div>

Css:

.tofix{
      width:300px;
      position:fixed;
      bottom:0;
 }

answered Apr 26 '14 at 15:18

wahid

1,150
1
9
16

score 0 · Accepted Answer · answered Apr 26 '14 at 14:54

0

The problem occurs because of your #content. You just try to change its position as following:

#content{
    position : static;
}

Or you just simply remove it because the position is set as static by default.

answered Apr 26 '14 at 14:54

lvarayut

13,963
17
63
87

It is true that it solves the footer problem but then the menu will start pushing my content div arround :( – AronChan Apr 26 '14 at 14:57
@AronChan Can you update your question by putting how your menu pushing the content div? I tried on your website and It has nothing strange. – lvarayut Apr 26 '14 at 14:59
try and take a look now. ill set content to static so it will reproduce the issue – AronChan Apr 26 '14 at 15:00
if you hover the menu items now they will push the rest of the design – AronChan Apr 26 '14 at 15:00
The submenu elements need to be positioned absolutely. – Alexander Wallin Apr 26 '14 at 15:02
ok that seems to solve the issue. there is still a few issues with the way it displays the submenu but if i can fix it i will select your anwser. thanks alot for the help! – AronChan Apr 26 '14 at 15:04

score 0 · Answer 3 · answered Apr 26 '14 at 15:00

0

Remove the position:absolute from your #content.

Also It worked when I first opened the link, please don't change the live code while asking the question.

answered Apr 26 '14 at 15:00

caffeinated.tech

6,428
1
21
40

And make the on hover sub menu `position:absolute` and position it with `top` and `left` etc. – caffeinated.tech Apr 26 '14 at 15:04
1

or you can put `position: absolute` on the submenuts and then `position: relative` on their parents so that the `top` and `left` properties are just relative to the submenus' parent element. – Arnelle Balane Apr 26 '14 at 15:06
the problem is that the submenus open on several menu items. so giving them specific top and left properties will not work – AronChan Apr 26 '14 at 15:08
@AronChan, true, to make it work for all menu options use @Arnelle's suggestion of adding `position:relaitve;` to the parent menu items, then the top and left attributes are relative to menu item which is it's parent. – caffeinated.tech Apr 26 '14 at 15:14

Footer will not position itself at the bottom of page

3 Answers3