Sticky Footer Dilemma - so close
- by fmz
I have an effective sticky footer solution, but I have a slight conflict because of the need for a background image in addition to the repeating banner image across the top.
In order to make the large watermark type image show up on this site I added the following div:
<div id="body-outer">
The only problem is that once I add this div tag, the footer climbs up the page, overriding all content in its path.
If I remove that div, the footer is as sticky as one could hope. Is there some way to have the background image and the sticky footer too?
Here is the basic html structure:
<body class="home">
<div id="body-outer">
<div id="container">
<div id="header">
...
<div id="footer">
<p>Placeholder for footer content</p>
</div>
Here is the css for the sticky footer and the background image:
#body-outer { background: url(../_images/bg_body.jpg) no-repeat center top; height: 100%; }
body { width: 100%; background: url(../_images/bg_html.jpg) repeat-x left top; }
#container { width: 960px; margin: 0 auto; }
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; padding-bottom: 140px; }
#main { padding-bottom: 0; }
#footer {
position: relative;
width: 100%;
background-color: #4e8997;
margin-top: ; /* negative value of footer height */
height: 140px;
clear:both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix { height: 1%;}
Any assistance in sorting this out would be greatly appreciated.
thanks.
