Jump to content

footerstick help

jjb123

By jjb123
in CSS

 Share

Recommended Posts

jjb123 Newbie

jjb123

Posted
Posted

I am trying to get my footer to stick on the bottom of the page, to no avail. I have tried the FooterStickAlt think and can't get it to work.Here is the html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="themes/default/style.css" /></head><body><center><div class="container"><div id="notfooter">	<!-- Top Most Header Images -->	<div class="headercontainer">		<div class="floatleft">			<img src="themes/default/images/logo.gif" />		</div>		<div class="floatright">			<img src="themes/default/images/contactlogo.gif" />		</div>	</div>	<!-- Main Body -->	<center>	<div class="contentbody">	<br /><br />		</div></div><div id="footer"><div class="footercontent"></div></div></div></body></html>

And here is the CSS.

.container {width: 807px;}.bodycontainer {width: 798px;background-color: #FFFFFF;height: 100%;}.headercontainer {width: 798px;height: 111px;background-image: url(images/headerbg.gif);}.footercontent {width: 798px;height: 31px;background-image: url(images/footerbg.gif);}html {height: 100%;}body {height: 100%;}#notfooter{position: relative;min-height: 100%;}* html #notfooter{height: 100%;}#footer{position: relative;margin-top: -7.5em;}.contentbody {width: 797px;background-color: #FFFFFF;}

What happens when I use the above code is that the footer somehow escapes the container div and randomly floats up and to the left a little. When I apply a "position:absolute; bottom: 0;" to the footer it sticks to the bottom but the non footer stuff doesn't and the footer shifts left. What should I do? Thank you everyone. :)

Link to comment
Share on other sites
jlhaslip Devoted Member

jlhaslip

Posted
Posted

does this work for you?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>                <title>Example page for full height div</title>            <style type="text/css">        html, body {        height: 100%;        background-color: #ffff55;		}        #container { /* div you want to stretch */        min-height: 95%;        background-color: #ffff55; }        }        #footer { position:absolute; bottom: 0; margin-top: -20px; background-color: #ffff55; }    </style><!-- IE6 Hack Start -->    <!--[if lte IE 6]>    <style type="text/css">        #container {        height: 95%;        }    </style>    <![endif]--><!-- IE6 Hack End -->    </head>        <body>            <div id="container">            this div should be full height (you probably can't see it anyways because there is no background)        </div>            <div id="footer"> footer here </div>    </body>    </html>

Link to comment
Share on other sites
jjb123 Newbie

jjb123

Posted
  • Author
Posted

Nope, that just yields that same thing that I was able to do before, the footer is at the bottom with about 10 pix between it and the end of the browser window, the footer it about 5 pix to far left, and the part I want to stretch (contentbody in the code I gave) I can't even tell if it stretches because even through the background is white (distinguishable from page background) the white just cuts off right were the footer would have been. Here is a picture. 4gg7s0j.jpg

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
 Share
Go to topic listing
×
×
  • Create New...