CSS Sticky Footer Not Working
Add height: 100%;
to #site_wrapper
DEMO
Problems with CSS sticky footer
The fantastic CSS Tricks website has, in their Snippets area a snippet for a Sticky Footer
http://css-tricks.com/snippets/css/sticky-footer/
or using jQuery
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
latest link with demo
Sticky footer not working correctly with sidebar
You can remove width
from footer
and add right: 0
.
footer {
bottom: 0;
margin-left: inherit;
height: 100px;
left: 0;
position: absolute;
background-color: lightgrey;
right: 0;
}
Issue with sticky footer at the bottom of the page
I am amazed no one has still managed to answer your question correctly, since you've explained it so clearly.
This is how you do it using only css. Let's say this is your html markup:
<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
The css should look like:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
/* equal to footer height: */
margin-bottom: -140px;
}
.footer {
height: 140px;
}
Link: http://css-tricks.com/snippets/css/sticky-footer/
Sticky footer is not working
Use fixed
or absolute
positioning along with width
html,body { height: 100%; min-height: 100%;}
#wrapper { height: 100%; min-height: 100%; margin-bottom: -50px;}
#footer { position: fixed; width: 100%; bottom: 0; height: 50px; background-color: blue;}
<html>
<body> <div id="wrapper"> </div> <div id="footer"></div></body>
</html>
Problem with CSS Sticky Footer implementation
Your HTML is a tad strange. For example, why does banner-bg
wrap around everything?
That said, in order to use Sticky Footer technique you need to wrap everything but the footer into a single DIV. So your <body>
tag would only contain two top DIVs - wrapper
and footer
. All the stuff you currently have would go inside that wrapper DIV.
Note that Sticky Footer may not work for you if background images you're using include transparent areas as it relies on wrapper
background being covered by the header.
Update: Ok, here's the version that works. "Sticky Footer" style sheet is taken from cssstickyfooter.com and should work in all modern browsers. I've streamlined your HTML a bit (there's no need for separate background layers based on your picture) but you can modify it as you like so long as you keep the basic structure in place. Also, since I don't have your images I've added solid background colors for illustration purposes, you'll need to remove them.
<html>
<head>
<style>
* {margin: 0; padding: 0}
html, body, #wrap {height: 100%}
body > #wrap {height: auto; min-height: 100%}
#main {padding-bottom: 100px} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
body {
background-image: url("Images/img.gif");
background: #99CCFF;
color: #FFF;
font-size: 13px;
font-weight: normal;
font-family: verdana;
text-align: center;
overflow: auto;
}
div#banner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 9em;
background: url("Images/img2.gif") repeat-x;
background: #000;
}
div#wrap {
background: #666;
width: 84em;
margin-left: auto;
margin-right: auto;
}
div#header {
height: 16em;
padding-top: 9em; /* banner height */
background: url("Images/header/header-bg.png");
background: #333;
}
div#footer {
background: #000;
width: 84em;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="banner">Banner</div>
<div id="wrap">
<div id="main" class="clearfix">
<div id="header">Header</div>
<div id="content">
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content<br />
Content
</div> <!-- end content -->
</div> <!-- end main -->
</div>
<div id="footer">
Footer
</div>
</body>
</html>
CSS - Sticky footer + Sidebar Problems
Do you think you could post some example HTML and CSS you have besides just the div height and positioning?
What I was thinking is you could throw another <div>
inside the sidebar <div>
and set the margin-bottom or padding-bottom to 30px
. I'll work on a jsFiddle for you.
Problems with Sticky Footer
This is a better way to do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer"></div>
</body>
</html>
The limitation of sticky footers is that the footer must stay at a fixed height. But the elements you have in there shouldn't affect the layout as long as you are careful.
EDIT: Here's a revised template with the footer elements included:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
* html #outer {/* ie6 and under only*/
height:100%;
}
.wrapper {
min-height: 100%;
margin: -240px auto 0;
}
.content {padding-top: 240px;}
.footer {
height: 240px; background: #F16924; position: relative;
}
#print_blank {
padding-top: 0px;
bottom: 160px;
position: absolute;;
z-index: 11000;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#logo {
width: 180px;
padding-top: 5px;
bottom: 86px;
position: absolute;;
z-index: 9999999;
left: 45px;
}
#nav_bar {
padding-top: 0px;
bottom: 77px;
position: absolute;;
z-index: 99999;
width: 100% !important;
text-align: center;
min-width: 980px;
}
#footerarea {
bottom: 0px;
position: absolute;
width: 100%;
padding-top: 20px;
background-color: #F16924;
height: auto;
text-align: justify;
min-width: 960px;
z-index: 999999;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">Juicy stuff goes here</div>
<div class="push"></div>
<!-- end wrapper --></div>
<div class="footer">
<div id="print_blank"></div>
<div id="logo"></div>
<div id="nav_bar"></div>
<div id="footerarea">Contains other Text</div>
</div>
</body>
</html>
Footer position issue - CSS
You have many options to deal with this issue.
Option 1
.footer-container{
position:absolute;
bottom:0;
}
Option 2
Use a sticky footer
Option 3
html, body {
padding: 0;
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position:relative;
}
#content {
padding-bottom: 75px; /* This value is the height of your footer */
}
.footer-container {
position: absolute;
width: 100%;
bottom: 0;
height: 75px; /* This value is the height of your footer */
}
Related Topics
Twitter Bootstrap 3 Modal with Scrollable Body
Creating a Circular Menu with CSS
Zoom in and Out on Mouse Click with CSS
@Font-Face: Bold in Ff Is Bolder Than in Chrome
CSS Multi Line Ellipsis Cross Browser
CSS How to Only Make Bold Fonts for First <Ul> Set
Make a Div Display Under Another Using CSS in a Totally Fluid Layout
Google Font Not Showing in Firefox
What Do Commas Mean in CSS Selectors
Bootstrap 3 - Change Dropdown Background Colour
How to Target All Divs of The Same Class Except for Hovered Over Div
Smartgwt Button Cannot Override Skin_Styles.CSS
@Font-Face Not Working on Wordpress Site
Generate Img Src Data Uri for Svg with '<Use>' Elements