Saturday 9 October 2004 — This is exactly 20 years old. Be careful.
I’ll try not to get off on a CSS vs. tables rant here, tempting though it is. Just by coincidence, two different projects now need very similar HTML designs, and I don’t know what my options are for accomplishing it. Ideas are most welcome.
I need a page split horizontally in two parts. The top part should expand and shrink to display however much content it needs to. The bottom part should fill the rest of the browser window, and get a vertical scroll bar to see all of the stuff in it. The effect should be like an email message window: the top half stays fixed in place to show the message headers, and the bottom half scrolls to read the body of the message.
I’ve tried divs, I’ve tried tables, I’ve tried iframes, and my head is spinning with all the combinations I’ve tried that didn’t quite work. Please help! I’ll write a glowing review about you and your work!
Comments
Robert: I need the bottom half to fill the browser window. Other than that, your example is what I'm looking for.
HTML, Body {
Width:100%; Height:100%;
Margin:0; Padding:0;
Overflow:Hidden;
}
#Top {
Background-Color:Red;
Height:200px;
Overflow:Auto;
}
#Bottom {
Background-Color:Blue;
Position:Absolute;
Top:200px; Bottom:0; Width:100%;
Overflow:Auto;
}
Top Div
Bottom Div
This will work in CSS2 complaint browser. And to please WinIE some evil should be added:
#Bottom {
....
Height:Expression(document.body.offsetHeight-Top.offsetHeight);
}
This is evil because it (1) breaks CSS validation and (2) doesn't work without JavaScript. But in fact it works well in most cases.
I've made something like this on Telephone.Ru but with bottom fixed and top scrolled. So the basic idea is:
HTML, Body {
Width:100%; Height:100%;
Margin:0; Padding:0;
Overflow:Hidden;
}
#Top {
Background-Color:Red;
Height:200px;
Overflow:Auto;
}
#Bottom {
Background-Color:Blue;
Position:Absolute;
Top:200px; Bottom:0; Width:100%;
Overflow:Auto;
}
Top Div
Bottom Div
This will work in CSS2 complaint browser. And to please WinIE some evil should be added:
#Bottom {
....
Height:Expression(document.body.offsetHeight-Top.offsetHeight);
}
This is evil because it (1) breaks CSS validation and (2) doesn't work without JavaScript. But in fact it works well in most cases.
I wrote up a comparison of various overflow values at http://www.aminus.org/rbre/overflow
http://softwaremaniacs.org/Layout.html
But that means that the bottom part is whatever the top part isn't taking up, right?
It's a bit late now, but when I wake up tomorrow I'm going to do a mock-up.
I will try and see if google knows more, but I'm no Zeldman.
<!--[if IE]>
<style type="text/css" media="screen">
#Bottom {
height:expression(document.body.offsetHeight-Top.offsetHeight);
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css" media="screen">
#Bottom {
height:expression(document.body.offsetHeight-Top.offsetHeight);
}
</style>
<![endif]-->
This is a slight mis-feature.
Add a comment: