Jump to content

Page Footer


vchris

Recommended Posts

I have a site I'm working on and I'm just having a small issue with it. I want the footer of the page to go all the way at the bottom of the users screen.I am using css and xhtml.

...<body><a name="top"></a><div id="mastercontainer">	<div class="header"></div>	<div class="hornav"></div>	<div class="breadcrumb"></div>	<div class="vertnav"></div>	<div class="content"></div>	<div class="footer">	<a href="#top"><img src="arrow-up.jpg" name="footerarrowup" alt="Back to top" width="30" height="17" onmouseover="myOn('footerarrowup')" onmouseout="myOut('footerarrowup')" /></a><br />	Copyright © 2006	</div></div></body></html>

This page is a width of 750px and I have a border of 2px around it. Presently the footer is simply at the end of the content and left nav areas. Is there a way for the footer to be all the way down the page? So it seems like the page is one big column.Thanks :)

Link to comment
Share on other sites

What do you mean?do you mean the height of each column is not the same?I normally have a container div around my content div and nav divs.But I am unsure just what you mean.Do you have an example we can see?

Link to comment
Share on other sites

Sorry but I don't have any example... It's the site I showed in General. I have a container div that contains content, left nav and footer.For example: If I don't have much content on a certain page or the users resolution is very high, the page will end before the bottom of the screen which is pretty ugly I think. So I want to know if there is a way for the footer to always be at the bottom of the screen (expand the footer). So it looks like the page doesn't end.

Link to comment
Share on other sites

Ah right, min-height but that dont work in IE so thats no good, other that that I dont know.EDITRight in IE you can just give the content div a set height and it will expand as needed.Then in Firefox use min-height instead as it wont expand the div as nessary but it will accept the min-height.

Link to comment
Share on other sites

Ah right, min-height but that dont work in IE so thats no good, other that that I dont know.EDITRight in IE you can just give the content div a set height and it will expand as needed.Then in Firefox use min-height instead as it wont expand the div as nessary but it will accept the min-height.

Ok but with IE it will still only expand up to a certain point. Could I just put a height of 3000px?Maybe I can just create a nice fading border or something.
Link to comment
Share on other sites

Oh,It was expanding as far as it needed with the layout I was playing with in IE.EDITThis is what I was having a quick play with in IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>tester</title><style>body{margin: 0 auto;text-align: center;}#container{width: 90%;margin: 10px auto;background-color: #fff;color: #333;border: 1px solid gray;line-height: 130%;text-align: left;}#top{padding: .5em;background-color: #ddd;border-bottom: 1px solid gray;}#top h1{padding: 0;margin: 0;}#leftnav{float: left;width: 160px;margin: 0;padding: 1em;}#rightnav{float: right;width: 160px;margin: 0;padding: 1em;}#content{height: 400px;margin-left: 200px;border-left: 1px solid gray;margin-right: 200px;border-right: 1px solid gray;padding: 1em;max-width: 36em;}#wrap{}#footer{clear: both;margin: 0;padding: .5em;color: #333;background-color: #ddd;border-top: 1px solid gray;}#leftnav p, #rightnav p { margin: 0 0 1em 0; }#content h2 { margin: 0 0 .5em 0; }</style></head><body><div id="container"><div id="top"><h1>Header</h1></div><div id="wrap"><div id="leftnav"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p></div><div id="rightnav"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p></div><div id="content"><h2>Subheading</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div></div><div id="footer">Footer</div></div></body></html>

Edited by Jonas
Link to comment
Share on other sites

Yeah it does what were you adding it to though?Heres what I was playing with in firefox. Just remove the extra content to see the min-height in effect.(Dont work in IE)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"   "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>tester</title><style>body{margin: 0 auto;text-align: center;}#container{width: 90%;margin: 10px auto;background-color: #fff;color: #333;border: 1px solid gray;line-height: 130%;text-align: left;}#top{padding: .5em;background-color: #ddd;border-bottom: 1px solid gray;}#top h1{padding: 0;margin: 0;}#leftnav{float: left;width: 160px;margin: 0;padding: 1em;}#rightnav{float: right;width: 160px;margin: 0;padding: 1em;}#content{min-height: 400px;margin-left: 200px;border-left: 1px solid gray;margin-right: 200px;border-right: 1px solid gray;padding: 1em;max-width: 36em;}#wrap{}#footer{clear: both;margin: 0;padding: .5em;color: #333;background-color: #ddd;border-top: 1px solid gray;}#leftnav p, #rightnav p { margin: 0 0 1em 0; }#content h2 { margin: 0 0 .5em 0; }</style></head><body><div id="container"><div id="top"><h1>Header</h1></div><div id="wrap"><div id="leftnav"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p></div><div id="rightnav"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.</p></div><div id="content"><h2>Subheading</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p></div></div><div id="footer">Footer</div></div></body></html>

Edited by Jonas
Link to comment
Share on other sites

Cos it wont move if the content is longer than the screen length.

Link to comment
Share on other sites

But then the footer is always there even when it shouldnt be like a frames effect.BUt if that is an effect you dont mind having it is an option.

Link to comment
Share on other sites

What about placing the footer div in the main container div then defining the footer like this

#footer{     position: relative;     bottom:0px;     left:0px;}

That way it is always attached to the bottom of the container, regardless of it's size.You would need be carful the content doesn't run underneath the footer tho adding some <br/> at the end of the content shoudld solve that or making a spacer div.

Link to comment
Share on other sites

Yeah when I was writing that I was thinking about overlapping. That is always an issue unless you find some way to keep it from going to a certain height with CSS.

Link to comment
Share on other sites

What I was think ing was that if the footer is say height: 50px;If you put a spacer div with height: 50px (or maybe a bit more) at the end of the content then it would push the container down before it got overlapped.

Link to comment
Share on other sites

Ahhhhh, thats how I have seen it done before.Yeah I think that is the way it should be done as I have seen people say that before I just did not remember it at all.

Link to comment
Share on other sites

I tried it and couldn't get ti to work so this is the only solution I could come up with. It uses javascript so it is not the best solution but it works in FF and IE.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>	<title>Positioning Footer at the bottom of the page</title>	<style type="text/css">		html, body		{			height: 100%;			margin: 0px;		}		#container		{			margin: auto;			width: 625px;			height: 100%;			border: 5px solid #b8b8b8;			border-width: 0px 5px 0px 5px;		}		#header		{			background: red;			position: relative;			}		#content		{			background: blue;			position: relative;		}		#footer		{			background: green;			position: relative;			bottom: 0;			left: 0px;		}	</style></head><body>	<div id="container">		<div id="header">			This is the header.		</div>		<div id="content">			This is the content.			super long content...	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>	</div>		<div id="footer">			This is the footer.<br/>			Second line of the footer.		</div>	</div>	<script type="text/javascript">			var totalHeight = document.body.offsetHeight;		var objFooter = document.getElementById('footer');		var objHeader = document.getElementById('header');		var objContent = document.getElementById('content');		var objContainer = document.getElementById('container');		var calc = (totalHeight - objFooter.offsetHeight - objHeader.offsetHeight);				if(objContent.offsetHeight < calc)			objContent.style.height = calc + 'px';		else			objContainer.style.height = objHeader.offsetHeight + objFooter.offsetHeight + objContent.offsetHeight + 'px';	</script></body></html>

You can remove the <br/> tags and it still owrks regardless of the size of either of the 3 sections.

Link to comment
Share on other sites

What about placing the footer div in the main container div then defining the footer like this
#footer{     position: relative;     bottom:0px;     left:0px;}

That way it is always attached to the bottom of the container, regardless of it's size.You would need be carful the content doesn't run underneath the footer tho adding some <br/> at the end of the content shoudld solve that or making a spacer div.

And that would work in all browsers?
Link to comment
Share on other sites

I tried it and couldn't get ti to work so this is the only solution I could come up with. It uses javascript so it is not the best solution but it works in FF and IE.
Oh, well it can be done that way somehow cos I have seen others say the same thing as what you said before.I would prefer my way over using the javascript way it would just mean having two diffrent styles sheets though thanx to crappy IE yet again. :)
Link to comment
Share on other sites

it would just mean having two diffrent styles sheets though thanx to crappy IE yet again. mad.gif
You could use a CSS hack (it wouldn't validate tho :)).when defining class do this
.classname{    attributeName: value;    /*set it for everything*/    -attributeName: value'; /*set it for only IE*/}

Link to comment
Share on other sites

What about enclosing the things for IE in a separate stylesheet, so the main one at least could validate?[edit]Not to mention that having a special stylesheet to update is a lot better then not supporting the the certain feature on the browser at all.[/edit]

Edited by boen_robot
Link to comment
Share on other sites

Yeah but you still then have two stylesheets one for IE and one for everyother browser.

Link to comment
Share on other sites

But then you would have to download both each time instead of just the one that is needed.Grated it means you would only have to edit the one whenever you make changes but then once you have edited one it is easy enought to copy and paste to the other anyways.It is only a small one but it is still two instead of one.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...