Problem with CSS Sticky Footer implementation

by

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>

More Related Contents:

  1. How do you get the footer to stay at the bottom of a Web page?
  2. CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page
  3. How to use HTML to print header and footer on every printed page of a document?
  4. Make div stay at bottom of page’s content all the time even when there are scrollbars
  5. Footer at bottom of page or content, whichever is lower
  6. Flushing footer to bottom of the page, twitter bootstrap
  7. How to make a footer fixed in the page bottom
  8. force footer on bottom on pages with little content
  9. How to make css style on Google custom search engine [closed]
  10. CSS display: inline vs inline-block [duplicate]
  11. How to style the with only CSS?
  12. Detect if an input has text in it using CSS — on a page I am visiting and do not control?
  13. CSS @media print issues with background-color;
  14. What, exactly, is needed for “margin: 0 auto;” to work?
  15. Change opacity on all elements except hovered one
  16. Can I change the height of an image in CSS :before/:after pseudo-elements?
  17. css grid of squares with flexbox
  18. Error: CSS: background: / is an incorrect operator
  19. Background blur with CSS
  20. Cross browser way to rotate image using CSS?
  21. Use CSS to automatically add ‘required field’ asterisk to form inputs
  22. CSS get height of screen resolution
  23. Twitter’s Bootstrap 3 grid, changing breakpoint and removing padding
  24. Is there a way to apply styles to Safari only?
  25. Placeholder Mixin SCSS/CSS
  26. How do I apply a CSS class to Html.ActionLink in ASP.NET MVC?
  27. position:relative leaves an empty space
  28. What is the difference between p:nth-child(2) and p:nth-of-type(2)?
  29. Canvas is stretched when using CSS but normal with `width` & `height` attributes
  30. Custom CSS being overridden by Bootstrap CSS

Leave a Comment