CSS keep div at bottom of page

Hi,

I want to keep the footer div of my page at the bottom. I have tried the following and it doesn't work.

position: relative;
bottom: 0px;

Thanks in advance

mms_master

P.S. I also have another CSS related question open (also worth 500 points) here:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24439257.html
<div id='Container'>
		<div id='InnerContainer'>
			<div id='Head' >
				<div id='Portrait'>
					<a href='index.php'><img id='Portrait' src='images/portrait.jpg' /></a>
				</div>
				<div id='Title'>
					<div id='Text'>
						<?php echo $Forename . " " . $Surname . "'s<br />Personal Blog"; ?>
					</div>
				</div>
				<div id='Clear'>&nbsp;</div>
				<div id='Nav'>
					<div id='NavButtons'>
						<div id='NavDivide'>&nbsp;</div>
						<div id='NavButton'>
							<a href='index.php' id='NavButton'>Home</a>
						</div>
						<div id='NavDivide'>&nbsp;</div>
						<div id='NavButton'>
							<a href='gallery.php'>Gallery</a>
						</div>
						<div id='NavDivide'>&nbsp;</div>
						<div id='NavButton'>
							<a href='calendar.php'>My Calendar</a>
						</div>
						<div id='NavDivide'>&nbsp;</div>
						<div id='NavButton'>
							<a href='aboutme.php'>About Me</a>
						</div>
						<div id='NavDivide'>&nbsp;</div>
					</div>
				</div>
			</div>
			<div id='Body'>
			<!-- Body content removed to reduce your reading :) -->
			</div>
			<div id='Foot'>
				Copyright &copy; 2009 <?php echo $Forename . " " . $Surname; ?>
			</div>
		</div>
	</div>
</body>
</html>

Open in new window

LVL 5
mms_masterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chad HaneyChief Technology OfficerCommented:
Change to:

position: absolute;
bottom: 0px;

Right now you are going relative to the elements location, which bottom:0px say move the element 0px below its location.
0
mms_masterAuthor Commented:
"which bottom:0px say move the element 0px below its location."
That makes more sense. I thought it was saying move the bottom 0px from its container.

If I use absolute and then fill the page content won't the footer overlap the page content? I can try to set a bottom margin to the same size as the footer but I will have to see how that will affect my background. Worst case maybe I will just need to add another div for the page content so the background is still 100% high.

I will have a go and see what I can do. Thanks for the reply.
0
Chad HaneyChief Technology OfficerCommented:
Oops sorry bout the grammar there, got interrupted in the middle of typing a response.  

You are correct.  The footer would overlap with any content that hits the bottom of the screen.

Here this may be handy with what you are doing.

http://ryanfait.com/sticky-footer/

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mms_masterAuthor Commented:
Sorry it's taken a while for me to reply. I have tried using absolute positioning. The only problem I'm having is that im using min-width: 775px; and max-width: 1000px; on the container. Now that the footer is positioned absolutely it no longer stretches to the width of the container, and I can't get it to stretch to the correct size as its not a fixed width.

I will have a look at the site you have linked as soon as I get a chance. Sorry it's taking me so long.

Thanks

mms_master
0
mms_masterAuthor Commented:
Thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.