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:

Code:

* {
	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:

Code:

<!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

Thread: Dynamic Footer position

Thread Tools

Search Thread

Dynamic Footer position

Bookmarks

Bookmarks

Posting Permissions