V
Vince C.
Hi all,
I've read much about web design these days about liquid design. I'd like my
web content to adapt to the web browser, be it IE, Netscape, Opera or
whatever. But I'm not sure I'm following the right way. Please tell me:
I'd like to display a header on my page but I'd like that header to remain
at the top of my page. Next I'd like to display the text content inside a
DIV that appear right below the header. I'd also like that DIV to have a
vertical scrollbar as soon as its bottom border reaches the bottom of the
canvas.
All attempts I have made resulted in scrolling the whole document. I could
not get the DIV to have a scrollbar until I set its height or bottom using
non-percentage values. Theoretically percentages in heights are legal in
CSS2 and refer to the container.
I tried many combinations between absolute/relative/static positions,
hidden/auto overflow, height/bottom/top positions. I know MSIE doesn't fully
conform to CSS2 (e.g. clipping, percentages, fixed position; it might
explain why my attempts were unsuccessful).
So I'd like your opinion on weather my wish is compatible with liquid design
or not. If not, would you mind please pointing alternatives (note I expect
you'd say I'm focusing on controlling layout too much)? Otherwise could you
provide an example?
Here's the picture (watch out var. font):
+--------------------------+
| Header (fixed height) |
+--------------------------+
| Body (variable height). |
| Vertical scrollbar |
| if height smaller than |
| text height. |
...
| |
+--------------------------+ <-- this border follows the
bottom of the canvas
N.B.: Header has a fixed height using vertical padding against relative font
height hence no pixel nor percentage height.
Thanks a lot in advance.
Vince C.
I've read much about web design these days about liquid design. I'd like my
web content to adapt to the web browser, be it IE, Netscape, Opera or
whatever. But I'm not sure I'm following the right way. Please tell me:
I'd like to display a header on my page but I'd like that header to remain
at the top of my page. Next I'd like to display the text content inside a
DIV that appear right below the header. I'd also like that DIV to have a
vertical scrollbar as soon as its bottom border reaches the bottom of the
canvas.
All attempts I have made resulted in scrolling the whole document. I could
not get the DIV to have a scrollbar until I set its height or bottom using
non-percentage values. Theoretically percentages in heights are legal in
CSS2 and refer to the container.
I tried many combinations between absolute/relative/static positions,
hidden/auto overflow, height/bottom/top positions. I know MSIE doesn't fully
conform to CSS2 (e.g. clipping, percentages, fixed position; it might
explain why my attempts were unsuccessful).
So I'd like your opinion on weather my wish is compatible with liquid design
or not. If not, would you mind please pointing alternatives (note I expect
you'd say I'm focusing on controlling layout too much)? Otherwise could you
provide an example?
Here's the picture (watch out var. font):
+--------------------------+
| Header (fixed height) |
+--------------------------+
| Body (variable height). |
| Vertical scrollbar |
| if height smaller than |
| text height. |
...
| |
+--------------------------+ <-- this border follows the
bottom of the canvas
N.B.: Header has a fixed height using vertical padding against relative font
height hence no pixel nor percentage height.
Thanks a lot in advance.
Vince C.