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
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>
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>
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/
CSS sticky footer not working w/ flexbox
Remove margin: auto from #footer. An auto margin on a flex child has a neat effect, but not what you want to use here. Here's a good article on it. https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6
#footer { margin: 0!important;}<base href="https://area51.ulmc.net/theurbexfederation/locations/industrial/technicalcenter/"><head> <title>The Urbex Federation | Technical Center</title> <link rel="stylesheet" type="text/css" href="../../../assets/css/styles.css"> <link rel="stylesheet" type="text/css" href="../../../assets/css/responsive.css"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"> <link rel='shortcut icon' type='image/x-icon' href='../../../assets/img/favicon.ico'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script> <script src="../../../assets/js/galleria/galleria-1.5.5.min.js"></script> <script> Galleria.loadTheme('../../../assets/js/galleria/themes/classic/galleria.classic.min.js'); Galleria.run('.galleria', { transition: 'fade', imageCrop: true }); </script></head><body> <div class="container"> <div class="content"> <div class="galleria"> <img src="img/1.jpg" data-description="Shipping/receiving area behind GSI Lumonics"> <img src="img/2.jpg"> <img src="img/3.jpg" data-description="Vandals had broken a few of the windows. It had rained pretty hard, letting in a ton of water"> <img src="img/4.jpg"> <img src="img/5.jpg"> <img src="img/6.jpg"> <img src="img/7.jpg"> <img src="img/8.jpg"> <img src="img/9.jpg" data-description="Power room. Most of the equipment had been ripped out."> <img src="img/10.jpg" data-description="Main floor area for GSI. Hard to know if this was a showroom or office area"> <img src="img/11.jpg"> <img src="img/12.jpg"> <img src="img/13.jpg"> <img src="img/14.jpg"> <img src="img/15.jpg"> <img src="img/16.jpg"> <img src="img/17.jpg"> <img src="img/18.jpg" data-description="GSI lobby area"> <img src="img/19.jpg"> <img src="img/20.jpg" data-description="The only other standing building. Appeared to be a testing facility for Magna"> <img src="img/21.jpg"> <img src="img/22.jpg"> <img src="img/23.jpg"> <img src="img/24.jpg"> <img src="img/25.jpg"> <img src="img/26.jpg"> <img src="img/27.jpg"> <img src="img/28.jpg" data-description="The whole office looked like it had been untouched for a long time. Everything was coated in a thick layer of dust"> <img src="img/29.jpg"> <img src="img/30.jpg"> <img src="img/31.jpg"> <img src="img/32.jpg"> <img src="img/33.jpg"> <img src="img/34.jpg" data-description="Discarded testing equipment along with a fax machine"> <img src="img/35.jpg"> <img src="img/36.jpg" data-description="A hole in the wall led into another unit for an energy company"> <img src="img/37.jpg"> <img src="img/38.jpg"> <img src="img/39.jpg"> <img src="img/40.jpg"> <img src="img/41.jpg"> <img src="img/42.jpg" data-description="An empty office area for the energy company. Lots of office furniture just left behind"> <img src="img/43.jpg"> <img src="img/44.jpg"> <img src="img/45.jpg"> <img src="img/46.jpg"> <img src="img/47.jpg"> <img src="img/48.jpg"> <img src="img/49.jpg"> <img src="img/50.jpg" data-description="Magna offices. This area appeared to have been used much more recently than the other section of the office"> <img src="img/51.jpg"> <img src="img/52.jpg"> <img src="img/53.jpg"> <img src="img/54.jpg"> <img src="img/55.jpg" data-description="DMARC room for the phone, security, and internet systems"> <img src="img/56.jpg" data-description="The security system was still running off its backup battery, but the service had been cut off. A loud warning alarm echoed throughout the building during this exploration"> <img src="img/57.jpg"> <img src="img/58.jpg"> <img src="img/59.jpg" data-description="The complex is located right next to a Costco. It was unnerving being so close to activity"> <img src="img/60.jpg" data-description="Receiving area for an autobody manufacturing company behind Magna"> <img src="img/61.jpg" data-description="Company documents were carelessly discarded"> <img src="img/62.jpg"> <img src="img/63.jpg"> <img src="img/64.jpg"> <img src="img/65.jpg"> <img src="img/66.jpg" data-description="Second building, home to the testing area for Magna"> <img src="img/67.jpg"> <img src="img/68.jpg"> <img src="img/69.jpg"> <img src="img/70.jpg" data-description="Partially demolished in preparation for redevelopment"> <img src="img/71.jpg"> <img src="img/72.jpg" data-description="Lots of random items in this building"> <img src="img/73.jpg"> <img src="img/74.jpg" data-description="A gym may have occupied the vacant Magna building for a short time, based on many of the items left behind"> <img src="img/75.jpg" data-description="Lockers with an unusual choice of material"> <img src="img/76.jpg"> <img src="img/77.jpg"> <img src="img/78.jpg" data-description="Office area"> <img src="img/79.jpg" data-description="Homeless people were/are camping in the empty offices"> <img src="img/80.jpg"> <img src="img/81.jpg"> <img src="img/82.jpg"> <img src="img/83.jpg"> <img src="img/84.jpg"> <img src="img/85.jpg"> <img src="img/86.jpg"> <img src="img/87.jpg"> <img src="img/88.jpg"> <img src="img/89.jpg"> </div> <h1>Technical Center</h1> <p>Opening in the early 1980s, this technical center and office complex was home primarily to automotive testing, vision and laser manufacturing, as well as many other businesses in other industries. The complex was comprised of 3 separate buildings, split into many different units.</p> <br /> <p>The center remained at almost max occupancy until the mid-2000s, when companies began moving out due to outgrowing the size of the facility. The eventual recession didn't help at all, and the center continued to lose tenants. The nail in the coffin for the center was when the largest tenant, Magna Automotive, moved to another facility. After this, a few smaller businesses occupied the facilities, but the complex was still mostly empty. In 2013, the last tenant moved to a different facility, putting the complex at 100% vacancy.</p> <br /> <p>Shortly after, the developer of the site announced plans for a new marketplace and shopping center that would make use of the existing structures. As part of this plan, one building and a quarter of another were torn down. No new development has happened at the site since. Electricity and other services were cutoff shortly before the partial demolition, and the interiors of the remaining buildings are gradually decaying as a result. The center will hopefully see a brighter future, but for now, it remains vacant and exposed to the elements.</p> </div> </div> <div id="footer"> <div id="footer-logo"> <img src="../../../assets/img/logo-whitebg.png"> </div> <div id="copyright-text"> <p>Copyright © 2017 The Urbex Federation. All Rights Reserved.</p> </div></div>Section not working with CSS Sticky Footer
There's two problems. The first is that your header and section take up more space than you have adjusted for in your section. Secondly, you should use margin-bottom instead of padding-bottom when you adjust for the footer height (negative padding isn't supported).
So what you need to do is to put the header and main section in a common wrapper element. That wrapper element is the one that should adjust for the footer height using the following "trick":
min-height: 100%;
margin-bottom: -85px;
Something like this:
<html>
<body>
<div class="wrapper">
<header></header>
<section></section>
</div>
<footer></footer>
</body>
</html>
with this styling:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
background: red;
min-height: 100%;
margin-bottom: -85px;
}
.wrapper:after {
content: "";
display: block;
}
footer {
background: blue;
height: 85px;
}
Here's a fiddle showing it: https://jsfiddle.net/63fo4tq4/
Related Topics
How to Trigger Autofill in Google Chrome
How to Make Div Elements Display Inline
Linking to Another HTML Page in Google Apps Script
How to Change Bootstrap 3 Column Order on Mobile Layout
Positions Fixed Doesn't Work When Using -Webkit-Transform
Freeze the Top Row For an HTML Table Only (Fixed Table Header Scrolling)
How to Have Two Background Colors For a Single HTML Element
Center a Div Horizontally and Vertically
Css - How to Style a Selected Radio Buttons Label
Open Link in New Tab or Window
Do I Encode Ampersands in ≪A Href...≫
Using HTML and Local Images Within Uiwebview
Transparent Half Circle Cut Out of a Div