CDIT_Solutions
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
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.
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"?
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(image s/patterne d_bg.png);
background-repeat:repeat;
color: #ffffcc;
font-size: 62.5%;
font-family:Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
height: 100%;
}
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(image
background-repeat:repeat;
color: #ffffcc;
font-size: 62.5%;
font-family:Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
height: 100%;
}
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.
Any suggestions?
Going to bed so please don't be offended by a lack of prompt response.
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!
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.
You can try like this
#footer {
position:absolute;
clear: both;
margin: 0 auto;
border: 0;
background-image:url(image s/footer.p ng);
background-repeat:repeat-x ;
margin-top: 20px;
width:100%;
bottom: 0;
height: 60px;
}
#footer {
position:absolute;
clear: both;
margin: 0 auto;
border: 0;
background-image:url(image
background-repeat:repeat-x
margin-top: 20px;
width:100%;
bottom: 0;
height: 60px;
}
#footer {
clear: both;
margin: 0 auto;
border: 0;
background-image:url(image s/footer.p ng);
background-repeat:repeat-x ;
margin-top: 20px;
width:100%;
bottom: 0;
overflow: hidden;
height: auto;
clear: both;
}
Can you please try this and check?
clear: both;
margin: 0 auto;
border: 0;
background-image:url(image
background-repeat:repeat-x
margin-top: 20px;
width:100%;
bottom: 0;
overflow: hidden;
height: auto;
clear: both;
}
Can you please try this and check?
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&