Wed, 2007-09-26 07:17
So i'm trying to get my head around this one.
Basically what i want it a fixed width container div which expands to the bottom (100% height) but with a, let's say, 10px margin at the top. In addition there has to be a sticky 100% width footer which always shows at the bottom.
The following html/css does exactly that without the margin at the top:
Test
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0 0 0 0;
_height: 100%; /* for ie sux */
}
#nonFooter
{
width: 800px;
margin: auto;
position: relative;
min-height: 100%;
background-color: #FF0000;
}
* html #nonFooter
{
height: 100%;
_height: 100%; /* for ie sux */
}
#footer
{
height:60px;
position: relative;
margin-top: -60px;
background-color:#FFFF00;
}
.clearer
{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
Now, when i add a "margin-top: 10px;" in the #nonFooter i do get the margin, but as a side-effect a scrollbar appears. I've been trying with negative margins in pretty much all elements now, but none seem to solve the issue.
As a bonus, the footer overlaps the text when the text gets to the bottom (noticable if you resize the window to a smaller size).
I've been googling and experimenting and only have a few hairs on my head left. So if anyone has a ephinany or sollution i would be ever so grateful with a cherry on top =)
