How do you make this in HTML?

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

[gravatar]
Don't think it's possible without JavaScript, that...
[gravatar]
Set the 'overflow' attribute to "scroll" on your bottom div. See http://www.aminus.org/rbre/python/test.htm for an example.
[gravatar]
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]
"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]
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]
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]
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]
Damn... This looked good on preview :-(. Ok here it is:

http://softwaremaniacs.org/Layout.html
[gravatar]
(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]
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]
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]
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]
Thrice is a charm

<!--[if IE]>
<style type="text/css" media="screen">
#Bottom {
height:expression(document.body.offsetHeight-Top.offsetHeight);
}
</style>
<![endif]-->
[gravatar]
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]
nice use of expression. got what ya needed Ned?
[gravatar]
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.