Log in

View Full Version : Dynamic Footer position


Spionred
10-01-2009, 09:30 PM
Hi,

I know this has probably been done to death but I can’t seem to find a solution that fits. I am putting together a website using PowerCMS from WebAssist. This mean the length of the main content div and a right sided div (under the navigation) may have a dynamic length based on the content the user writes. The problem I have got is I need to make the footer sit at the bottom of which ever if these is the longest.

the site is www.bestinresumes.com
the CSS is www.bestinresumes.com/global.css

any thoughts?

Cheers,
Kevin
NDK
10-02-2009, 12:28 PM
what you can try is this:

CSS:

* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}


HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
...
</head>
<body>
<div class="wrapper">
content
<div class="push"></div>

</div>

<div class="footer">
footer text
</div>


</body>
</html>

found with google on http://ryanfait.com/sticky-footer/
Spionred
10-04-2009, 02:28 AM
Hi,

Thanks for the reply. I'd already had a look at that but I can get it to work.

It seems there is a detachment between the other items in the page and the wrapper. Maybe it has something to do with all the items being in an absolute position.

K