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.
