Sticky Footer Dilemma - so close

Posted by fmz on Stack Overflow See other posts from Stack Overflow or by fmz
Published on 2010-05-03T14:54:18Z Indexed on 2010/05/03 14:58 UTC
Read the original article Hit count: 503

Filed under:

css-positioning

|

css-layout

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.

Developer IT