How do you make this in HTML?

Saturday 9 October 2004 — This is 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

[gravatar]
sil 11:22 AM on 9 Oct 2004
Don't think it's possible without JavaScript, that...
[gravatar]
Robert Brewer 11:26 AM on 9 Oct 2004
Set the 'overflow' attribute to "scroll" on your bottom div. See http://www.aminus.org/rbre/python/test.htm for an example.
[gravatar]
Ned Batchelder 11:31 AM on 9 Oct 2004
sil: Don't tell me that! :-(

Robert: I need the bottom half to fill the browser window. Other than that, your example is what I'm looking for.
[gravatar]
Robert Brewer 1:05 PM on 9 Oct 2004
"fill" as in { width: 100% } ? Or same width as the top half? Or height? Or margins? padding? So many interpretations... ;) Email me if you want to go offline and hash it out.
[gravatar]
Maniac 2:25 PM on 9 Oct 2004
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.

[gravatar]
Maniac 2:27 PM on 9 Oct 2004
Oops... Forgot to check if tags will pass. Let's try again:

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.

[gravatar]
Robert Brewer 2:28 PM on 9 Oct 2004
Because users can set their browser dimensions to ridiculously small, what do you want to happen when the top half fills the whole window (and then some)?

I wrote up a comparison of various overflow values at http://www.aminus.org/rbre/overflow
[gravatar]
Maniac 2:30 PM on 9 Oct 2004
Damn... This looked good on preview :-(. Ok here it is:

http://softwaremaniacs.org/Layout.html
[gravatar]
[m] 9:49 PM on 9 Oct 2004
(after reading the entry)
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.
[gravatar]
[m] 12:39 PM on 10 Oct 2004
Hmm, can't seem to get the lower half to take up all the space that is unused by the bottom half. If one of those halves had a defined height (relative or absolute) this would be alot easier.

I will try and see if google knows more, but I'm no Zeldman.
[gravatar]
steve 2:43 AM on 11 Oct 2004
Maniac's approach is the one I'd take; the evil can be mitigated by putting the IE-only style inside IE conditional comments of the form

[gravatar]
steve 2:44 AM on 11 Oct 2004
Maniac's approach is the one I'd take; the evil can be mitigated by putting the IE-only style inside IE conditional comments of the form

<!--[if IE]>
<style type="text/css" media="screen">
#Bottom {
height:expression(document.body.offsetHeight-Top.offsetHeight);
}
</style>
<![endif]-->
[gravatar]
steve 2:45 AM on 11 Oct 2004
Thrice is a charm

<!--[if IE]>
<style type="text/css" media="screen">
#Bottom {
height:expression(document.body.offsetHeight-Top.offsetHeight);
}
</style>
<![endif]-->
[gravatar]
steve 2:48 AM on 11 Oct 2004
What happened just there was that I composed with ampersand escapes (so the text in the text area looked like the 2nd post, then hit preview to check it looked OK, then hit "add it" as it did - without spotting that the escapes had been unwound and there were now literal angle-brackets in the text area.

This is a slight mis-feature.
[gravatar]
mikey 5:01 PM on 12 Oct 2004
nice use of expression. got what ya needed Ned?
[gravatar]
Ned Batchelder 6:35 PM on 12 Oct 2004
Maniac's solution worked, so I do have what I need. Thanks all for your help!

Add a comment:

Ignore this:
Leave this empty:
Name is required. Either email or web are required. Email won't be displayed and I won't spam you. Your web site won't be indexed by search engines.
Don't put anything here:
Leave this empty:
Comment text is Markdown.