Footer Doesn't stay down
After spending many hours on this searching the internet and reading tutorials I still can't get the footer to stay at the bottom of the page.
What I have is a container with all the content in it and i would like a footer to stay at the bottom of the page always, even if scrolling is needed. The footer must be outside the container as i want it to span across the entire page, not just the width of the container which is 900px wide.
I can get the footer to stay at the bottom if the footer is inside the container, but that is not what i would like, I need the footer to be outside of the container.
Now heres something bizarre, when i preview this in firefox, opera and IE8 on my 2 desktop PC's the footer is fine and sitting where it should be, but when i preview it on a family members laptop also using newest firefox, IE and opera it sits 1/2 way up the page. I have also tried on my iphone using safari and its sitting in the middle of the screen. How does this happen?
Here is what it looks like on my 2 desktop pc's (image has been downsized from 1920x1200)
[IMG]http://i54.tinypic.com/28jxzid.png[/IMG]
<head>
<title></title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
background-image: url(img/bkgdContent1.jpg);
}
#container {
min-height:100%;
position:relative;
width: 900px;
margin:auto;
margin-bottom: -100px;
}
#header {
padding: 0 10px;
background-image: url(img/transparentbanner.png);
height:270px;
}
#body {
padding:15px;
margin: 0 1.5em 0 13em;
padding-bottom:100px; /* Height of the footer */
font-family: Arial, Helvetica, sans-serif;
color: #06F;
background-image: url(img/Silhouette2.png);
background-repeat: no-repeat;
background-position: right bottom;
}
#sidebar {
width: 200px;
float: left;
padding: 30px 0;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:100px; /* Height of the footer */
background-image: url(img/footer4.png);
background-repeat: repeat;
}
/* other non-essential CSS */
#footer_text {
width:100%;
position:absolute;
bottom:0;
text-align: center;
color: #FFF;
font-size: 14px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.main_header_text {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 36px;
color: #FFF;
}
.clearfooter {
height: 100px;
clear: both;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="sidebar">
<!-- end #sidebar1 --></div>
<div id="body">
<!-- Body start -->
<!-- Body end --></div>
<div class="clearfooter"></div>
</div>
<div id="footer">
<div id="footer_text">
<p><strong>Send Email</strong></p></div>
</div>
</div>
</body>
</html>
Megan posted this at 15:55 — 27th January 2011.
She has: 11,421 posts
Joined: Jun 1999
I think attempting to absolutely position the footer at the bottom is probably not the best way to do this. Would position:fixed do what you want? Try that. I'm not exactly clear on how you're wanting this to work...
Megan
Connect with us on Facebook!
TracidTrax posted this at 18:09 — 27th January 2011.
They have: 2 posts
Joined: Jan 2011
Hi Megan
I've tried the position:fixed for the footer but no luck there. As for how im wanting this to work, im open to all ideas and i just want the footer to stay down . Are my divs correct in the html part?
I also read about the clear:both CSS rule so i added that in there also but its not working
This is my 1st web page so im no expert
Megan posted this at 20:14 — 31st January 2011.
She has: 11,421 posts
Joined: Jun 1999
Can you post a working link with some content in it so we can get a better picture of what's happening?
QiSoftware posted this at 16:45 — 31st January 2011.
They have: 20 posts
Joined: Sep 2004
Did you try margin-bottom:0; ?
Q...
UVUWolverine posted this at 04:43 — 9th February 2012.
They have: 1 posts
Joined: Feb 2012
Okay, what you need is a sticky footer with a few modifications. If you need a tutorial on sticky footers you can find a great one here: http://www.htmltutorialsandtips.com/css-sticky-footer/
Now, after adding the sticky footer you will need to do some adjustments for that background image on your footer. You'll want to actually add it to the html as a second background(which will work fine in any CSS3-complaint browser) like so:
background: url('footerBackground.jpg') bottom center repeat-x;
This will put the image on the bottom of the page, center it, and repeat it horizontally to stretch it across the whole browser window(this way you only need an image 1px wide, saves on load time).
On older browsers this won't work, but IE9 and Firefox 4 and all other standards-compliant browsers will show it just fine. Unfortunately there really isn't a way to make this work completely in older browsers(thus the addition of multiple background images in CSS3).
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.