Nico,
it was in reference to Ryan’s post above mine.
At first we were confused on what exactly you wanted. Looking at the image you posted, we would probably call that a “scrolling div” or sometimes “css frames” (they look like frames but aren’t… instead they are created via CSS).
Newbies often don’t know jargon names like “overflow/scroll box”, “sticky footer” etc. They are names for certain techniques that you only pick up over time usually.
I’m confused again:
But in all my simplicity I thought the maincontainer is inside the body. So if I make the body less height then my maincontainer is less height as well. But I understand now that was wrong thinking.
Maincontainer certainly IS in the body, yes.
But the body is a sort special container. It sometimes has rules that other, regular boxes don’t.
Also, if you have two regular boxes:
<div id=“foo”>
<p>stuff…</p>
<div id=“bar”>
<p>more stuff…</p>
</div>
</div>
If #bar has some set height like 10em, then #foo naturally must be bigger (or at least as big) but if #foo had started out really really big, like height: 20em; then you’d have
#foo {
height: 20em; (em ~= the size of “m”)
} #bar {
height: 10em;
}
If later you make #foo smaller, #bar does not change. Though you won’t be able to make #foo smaller than #bar. But if #foo {
height: 13em;
}
All helped me a lot further and I know now what a sticky footer is. I will never forget.
But now I have the problem that the content is running out of the div and out of the browser viewport. Can someone tell me where I have missed the turning point? I have tried a lot: float, position absolute, relative, fixed, bottom 0, 173, -173px but nothing solves my problem. I add the css+html file to see what I mean and you can also see it on http://test.nicovandekamp.nl
If you have an absolute element that you have set to top:150px and then you give it 100% height it will then always be 150px too big for wherever you place it. You cannot use 100% height in this way.
For absolute elements you can set the top and bottom co-ordinates to create the height you need.
Of course that doesn’t address Ie6 as it doesn’t understand top and bottom when specified together so I hope you don’t want support for ie6 as it will get very complicated.