This method has worked for me on various projects:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
There was just too much code in your example, so I did a quick one.
You can extend it.
HTML:
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<div class="water"></div>
<div class="copyright">
<p>Copyright (c) 2008</p>
</div>
</div>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -194px;
width: 942px;
border: 1px solid #000;
}
.push {
height: 194px;
}
.footer {
height: 194px;
width: 100%;
}
.water {
width: 942px;
border-right: 1px solid #000;
border-left: 1px solid #000;
margin: 0 auto;
background: url(ADD IMAGE LOCATION) bottom center scroll no-repeat;
height: 155px;
}
.copyright {
background-color: #ccc;
height: 43px;
}
Hope I haven't misunderstood anything here.
Regards
-----
Mustafa Quilon
2009/4/19 Anne E. Shroeder <a...@language-works.com>:
> My client has a design comp that I'm finding extraordinarily challenging to
> implement -- the currentt challenge is implementing a sticky footer that has
> two parts AND that maintains a right/left border on the center column (right
> and left column contain no content) that extends all the way down to the
> footer.
>
> Using the methodology described here:
> http://brassblogs.com/blog/sticky-footer I've been able to implement the
> basic grey line along with the left/right shadows and get the footer to
> stick to the bottom - BUT not the left/right borders to extend down.
>
> Worse, when I add the image of the water on top of the grey line, I find I
> can only put in a min-height to get it to work - which really means it isn't
> working.
>
> When I add in the orange crossbar, everything breaks apart. Yikes.
>
> Is it possible to code this?
>
> The comp is here: http://www.language-works.com/swim/comp.jpg
> My rather unsatisfactory implementation here:
> http://www.language-works.com/swim/stickyfooter.htm
>
> Anne
>
>
> ______________________________________________________________________
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
