asked on

Footer only sticks to bottom of browser with absolute positioning

Hi all,

I'm approaching completion of a website development and have noticed that the footer bar (60px height generated in Fireworks with content divs inside it) doesn't sit at the bottom of the browser window on one page where there is a small amount of content in my #main div.

I've spent the last 3 hours trying out various solutions found on a variety of websites but none work apart from when I apply absolute positioning of the footer, this is no good as the footer sits on top of content on all the other pages.

I attach code for the site's template and CSS and would be more than grateful if someone can tell me what needs to change to my CSS in order for the footer bar to stick on the browser's bottom as required but not overlay content.

Many thanks in advance,

Chris
jb-main.dwt.php
jb-main.css

ASKER CERTIFIED SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

COBOLdinosaur

If you want the trouble free solution then use position:fixed; bottom:0;

that will position the footer at exactly the bottom of the screen and the content will scroll behind it as if is was a task bar. It will be the same for every page because is is dependent on the viewport size, not the dimensions and type of content.

Cd&

CDIT_Solutions

ASKER

Thanks for the response, I've placed the footer outside of the wrapper div, included a push div before the end of the wrapper div and adopted code where applicable (I believe) with the exception of max-width lines but to no avail!

I attach new files post amendments, any direct help with the code would be really appreciated as I feel I've tried everything and there is obviously a subtle amendment required to the code.
jb-main.dwt.php
jb-main.css

CDIT_Solutions

ASKER

Tried the fixed positioning approach but that caused an overlay effect that is no good as links within the footer go over the top of content.

CDIT_Solutions

ASKER

I'm sure this is not an issue but is it due to my footer div being an "id" and push div being a "class"?

Kyle Hamilton

1. no, it doesn't matter, as long as your css matches your html

2. this is not a fixed positioning approach.
you need to add html to the body like in the example:

html, body {
      background-color:#300;
      background-image:url(images/patterned_bg.png);
      background-repeat:repeat;
      color: #ffffcc;
      font-size: 62.5%;
      font-family:Arial, Helvetica, sans-serif;
      padding: 0;
      margin: 0;
      height: 100%;
      }

CDIT_Solutions

ASKER

Putting html next to body appears to have fixed the issue of footer placement but all my text has shrunk obviously due to the font-size attribute (but not in IE which has remained OK) and none of the footer links now work!

Any suggestions?

Going to bed so please don't be offended by a lack of prompt response.

CDIT_Solutions

ASKER

Deleted browsing history in IE and tried again. Text has shrunk similar to Chrome and Firefox, however the footer links work in IE but not in Chrome & Firefox. ARGH!

Kyle Hamilton

You'd have to post a link to the actual page. It's pretty impossible to trouble shoot code in a vacuum. Also, it should probably be a new question.

Prafulla Maharjan

You can try like this

#footer {
      position:absolute;
      clear: both;
      margin: 0 auto;
      border: 0;
      background-image:url(images/footer.png);
      background-repeat:repeat-x;
      margin-top: 20px;
      width:100%;
      bottom: 0;
      height: 60px;
}

Prafulla Maharjan

#footer {
clear: both;
margin: 0 auto;
border: 0;
background-image:url(images/footer.png);
background-repeat:repeat-x;
margin-top: 20px;
width:100%;
bottom: 0;

overflow: hidden;
height: auto;
clear: both;
}

Can you please try this and check?