Forum Moderators: not2easy
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
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;
}
</style>
</head>
<body>
<div id="nonFooter">
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
</div>
<div id="footer"></div>
</body>
</html>
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 =)
With the height at 100%, you will probably get a scroll bar. Two other options are:
#nonFooter
{
width: 800px;
margin: 10px auto 0 auto; /* THIS OR */
position: relative;
min-height: 100%;
background-color: #FF0000;
padding-top: 10px; /* THIS */
}
Marshall
well that's what i tried. And indeed, that ends up in having a scrollbar for the amount of pixels the margin has (in either div/body)
Padding is no option as the container div will remain "pasted" to the top of the browserwindow.
Thanks for thinking with me though!
If you remove the footer altogether you will still see the scrollbar when you apply a margin-top to the container div.
I think basically what the problem comes down to is the fact you can't have a container div with 100% height _and_ a margin on the top?
This as any margins at the bottom don't seem to have _any_ effect what so ever on the elements.
/confuzzled
Marshall
What will work though is using absolute positioning on your page. Makes the page non-fluid though, which I kinda dislike. For IE6, you will need javascript to support simultanious use of top and bottom, such as "IE7.js".
