Val Dobson wrote:
> www.oakleafdesignprint.co.uk/dmk/
>
> I've spent two days trying to fix this layout, and getting nowhere.
> It doesn't look so bad in FF3 but a mess in IE7 (so what's new?)
> Anyway, what I'm trying to do is to get the footer - the green box -
> to stick to the bottom, at the foot of the .wrap container. But it
> won't.
...
Well, the height of my screen does not allow me to see what happens on
that page, as it has a scroll bar even at full height.
Here is the "sticky footer" method I use:
HTML
----
<body>
<div id=wrapper>
<div id=header,nav,content etc...></div>
</div><!-- #wrapper -->
<div id=footer>
<div id=copyright,address, etc...></div>
</div><!-- #footer -->
CSS
---
html, body, #wrapper {
height: 100%;
}
body > #wrapper {
height: auto;
min-height: 100%;
overflow: hidden;
}
#wrapper {
padding-bottom: 5em; /* height of footer */
}
#footer {
position: relative; /* fix backgrounds in IE maybe??? */
margin-top: -5em;
min-height: 5em;
_height: 5em; /* for IE 6 */
}
Note carefully that this *only* works to stretch a single DIV (#wrapper)
to full window height on short pages. It will not work on nested DIVs,
nor on a series of DIVs as you have in your design. Sorry.
Hope this helps.
Cordially,
David
--
______________________________________________________________________
css-discuss [[email protected]]
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/
