Filling the space between two absolute items with CSS

[Chris Nelson]

I'm new to the positioning aspects of CSS and I'm going crazy trying to
do something that seems like it should be fairly easy. I've Googled
all over and read CSS tutorials and not found an answer.

I want to divide my screen/page into four areas: a header, a footer, a
menu area, and content. The particular layout I'm trying to accomplish
is to have the header, menu area, and footer stacked on the left and
the content as a full-height column on the right. I have no trouble
placing the header, footer, and content but I want the menu area to
expand to fill the full height from header to footer and to scroll when
necessary. I'll try this in ASCI art:
+--------++------------------------------+
| Header || |
+--------+| |
| || |
| Menu || Content |
| || |
| || |
+--------+| |
| Footer || |
+--------++------------------------------+

It seems that if I wanted three elements across, I could use float to
put the first one on the left and the third one on the right and the
middle would fill but for vertical layout, there doesn't seem to be an
equivalent of float. What combination of position and size can I give
the menu area to make it adapt to how bit the header and footer may be?
Or is there some other setting I need?

TIA.

[Ben C]

On 2007-01-26, Chris Nelson <cn*****@nycap.rr.comwrote:

I'm new to the positioning aspects of CSS and I'm going crazy trying to
do something that seems like it should be fairly easy. I've Googled
all over and read CSS tutorials and not found an answer.

I want to divide my screen/page into four areas: a header, a footer, a
menu area, and content. The particular layout I'm trying to accomplish
is to have the header, menu area, and footer stacked on the left and
the content as a full-height column on the right. I have no trouble
placing the header, footer, and content but I want the menu area to
expand to fill the full height from header to footer and to scroll when
necessary. I'll try this in ASCI art:
+--------++------------------------------+
| Header || |
+--------+| |
| || |
| Menu || Content |
| || |
| || |
+--------+| |
| Footer || |
+--------++------------------------------+

It seems that if I wanted three elements across, I could use float to
put the first one on the left and the third one on the right and the
middle would fill but for vertical layout, there doesn't seem to be an
equivalent of float. What combination of position and size can I give
the menu area to make it adapt to how bit the header and footer may be?
Or is there some other setting I need?

You can use absolute positioning, something like this:

#header, #menu, #footer
{
position: absolute;
width: 15em;
}

#header
{
/* header is 15em high and starts at the top */
top: 0;
height: 15em;
}

#menu
{
/* menu runs from bottom of header to top of footer */
top: 15em;
bottom: 15em;
}

#footer
{
/* footer is 15em high and runs to the bottom */
height: 15em;
bottom: 0;
}

[Gus Richter]

Chris Nelson wrote:

I'm new to the positioning aspects of CSS and I'm going crazy trying to
do something that seems like it should be fairly easy. I've Googled
all over and read CSS tutorials and not found an answer.

I want to divide my screen/page into four areas: a header, a footer, a
menu area, and content. The particular layout I'm trying to accomplish
is to have the header, menu area, and footer stacked on the left and
the content as a full-height column on the right. I have no trouble
placing the header, footer, and content but I want the menu area to
expand to fill the full height from header to footer and to scroll when
necessary. I'll try this in ASCII art:
+--------++------------------------------+
| Header || |
+--------+| |
| || |
| Menu || Content |
| || |
| || |
+--------+| |
| Footer || |
+--------++------------------------------+

I'll assume Ben's column's width of 15em. Then the below should fulfill
your need of "want[ing] the menu area [Content] to expand to fill the
full height from header to footer and to scroll when necessary".

html, body, #content {height:100%;} /* 100% of viewport height declared
for #content */
body {margin:0;} /* remove default margins all around */
#content
{
margin-left:15em; /* indenting "content" the width of
the left column */
padding:0 1em; /* indent "content" further by 1em
both left and right */
overflow: auto; /* scrolls "content" if greater
height than the viewport */
}

It seems that if I wanted three elements across, I could use float to
put the first one on the left and the third one on the right and the
middle would fill ...

For your layout above, Ben's method using absolute is workable or by
floating left a wrapper containing Header,Menu and Footer and then
"Content" with the same declarations as above would flow to the right of
the wrapper.

... but for vertical layout, there doesn't seem to be an
equivalent of float. What combination of position and size can I give
the menu area to make it adapt to how bit the header and footer may be?
Or is there some other setting I need?

For the left column section, it may be advisable to use fixed height
values for Header and Footer - a percentage height value for Menu, since
it is likely to have a relatively larger height, in order to provide
flex to the column - overflow:auto applied to Menu would provide a
vertical scrollbar to Menu as well if the viewport is too small for a
large listing in Menu.

--
Gus

[Gus Richter]

Gus Richter wrote:

>
For the left column section, it may be advisable to use fixed height
values for Header and Footer - a percentage height value for Menu, since
it is likely to have a relatively larger height, in order to provide
flex to the column - overflow:auto applied to Menu would provide a
vertical scrollbar to Menu as well if the viewport is too small for a
large listing in Menu.

Sorry, I regard Header and Footer as fixed values, but in reality it
isn't for me since I have problems mixing a fixed size and percentages.
Therefore, depending on need, the Header may be something like 25%,
Footer 5% and Menu therefore 70% along with overflow:auto applied.

Ben's method of declaring top and bottom values also provides the flex
and with overflow:auto applied, does the same.

I probably shoulds not have brought up the other method?

--
Gus

[Chris Nelson]

On Jan 26, 5:12 pm, Ben C <[e-mail]:

On 2007-01-26, Chris Nelson <[e-mail]:
... I want the menu area to

expand to fill the full height from header to footer and to scroll when
necessary. ...

You can use absolute positioning, something like this:

#header, #menu, #footer
{
position: absolute;
width: 15em;
}
#header
{
/* header is 15em high and starts at the top */
top: 0;
height: 15em;
}
#menu
{
/* menu runs from bottom of header to top of footer */
top: 15em;
bottom: 15em;
}#footer
{
/* footer is 15em high and runs to the bottom */
height: 15em;
bottom: 0;
}

Thanks but I realize now I wasn't clear about wanting the header and
footer to size to accommodate whatever is put in them (as the page is
loaded) and the menu to size and scroll to show whatever is put in it
(as the window is resized). What you gave me is three fixed-size
areas, right?

[Ben C]

On 2007-01-29, Chris Nelson <cn*****@nycap.rr.comwrote:

On Jan 26, 5:12 pm, Ben C <[e-mail]:

>On 2007-01-26, Chris Nelson <[e-mail]:
... I want the menu area to

expand to fill the full height from header to footer and to scroll when
necessary. ...

You can use absolute positioning, something like this:

#header, #menu, #footer
{
position: absolute;
width: 15em;
}
#header
{
/* header is 15em high and starts at the top */
top: 0;
height: 15em;
}
#menu
{
/* menu runs from bottom of header to top of footer */
top: 15em;
bottom: 15em;
}#footer
{
/* footer is 15em high and runs to the bottom */
height: 15em;
bottom: 0;
}

Thanks but I realize now I wasn't clear about wanting the header and
footer to size to accommodate whatever is put in them (as the page is
loaded) and the menu to size and scroll to show whatever is put in it
(as the window is resized). What you gave me is three fixed-size
areas, right?

The header and footer were fixed height, the menu was variable height.

You can make the footer bottom:0 and height:auto, and you can make the
menu start below an auto height header just by making header and menu
normal-flow blocks (i.e. position:static). But I can't think of a way to
make the menu run from the bottom of an auto-height header to the top of
an auto-height footer fixed to the bottom of the viewport. Sounds like
you'd need a table for that, but setting the table height to 100% of the
viewport doesn't seem to be reliable.

[Chris Nelson]

On Jan 29, 12:57 pm, Ben C <[e-mail]:

On 2007-01-29, Chris Nelson <[e-mail]:

On Jan 26, 5:12 pm, Ben C <[e-mail]:

On 2007-01-26, Chris Nelson <[e-mail]:

...

Thanks but I realize now I wasn't clear about wanting the header and
footer to size to accommodate whatever is put in them (as the page is
loaded) and the menu to size and scroll to show whatever is put in it
(as the window is resized). What you gave me is three fixed-size
areas, right?The header and footer were fixed height, the menu was variable height.

You can make the footer bottom:0 and height:auto, and you can make the
menu start below an auto height header just by making header and menu
normal-flow blocks (i.e. position:static). But I can't think of a way to
make the menu run from the bottom of an auto-height header to the top of
an auto-height footer fixed to the bottom of the viewport. Sounds like
you'd need a table for that, but setting the table height to 100% of the
viewport doesn't seem to be reliable.

:-(

I played with something like this in an onload() block for the page:

var h = document.getElementById('header');
var m = document.getElementById('menubar');
var f = document.getElementById('footer');
m.style.position='fixed';
m.style.top = computedStyle(h, 'height');
m.style.bottom = computedStyle(f, 'height');

which worked as long as there was no padding in the header but when I
adeed padding the menubar overlays the bottom of the header by the
amount of the padding. I tried adding h.style.paddingTop but it seems
to be blank.

(computedStyle() is from http://javascript.stchur.com/index.php/a/
2006/06/21/p33, maybe there's a better way. The DOM inspector in
FireFox has the right height for the header but the computedStyle
doesn't.)

[Ben C]

On 2007-01-29, Chris Nelson <cn*****@nycap.rr.comwrote:

On Jan 29, 12:57 pm, Ben C <[e-mail]:

[snip]

>You can make the footer bottom:0 and height:auto, and you can make the
menu start below an auto height header just by making header and menu
normal-flow blocks (i.e. position:static). But I can't think of a way to
make the menu run from the bottom of an auto-height header to the top of
an auto-height footer fixed to the bottom of the viewport. Sounds like
you'd need a table for that, but setting the table height to 100% of the
viewport doesn't seem to be reliable.

:-(

I played with something like this in an onload() block for the page:

var h = document.getElementById('header');
var m = document.getElementById('menubar');
var f = document.getElementById('footer');
m.style.position='fixed';
m.style.top = computedStyle(h, 'height');
m.style.bottom = computedStyle(f, 'height');

which worked as long as there was no padding in the header but when I
adeed padding the menubar overlays the bottom of the header by the
amount of the padding. I tried adding h.style.paddingTop but it seems
to be blank.

(computedStyle() is from http://javascript.stchur.com/index.php/a/
2006/06/21/p33, maybe there's a better way. The DOM inspector in
FireFox has the right height for the header but the computedStyle
doesn't.)

element.getComputedStyle is the standard function. Note that you get
strings out of it which have to be "parsed".

The whole thing is horrible though-- using tables for layout is nothing
like as bad as using JS.

This works in FF:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
function convertHeight(h)
{
return new Number(h.substring(0, h.length - 2));
}

function setMenuHeight()
{
var header = document.getElementById("header");
var footer = document.getElementById("footer");
var menu = document.getElementById("menu");

var style = getComputedStyle(header, null);
var height = convertHeight(style.height);
menu.style.top = height + "px";

style = getComputedStyle(footer, null);
height = convertHeight(style.height);
menu.style.bottom = height + "px";
}

window.onload = setMenuHeight;
</script>
<style type="text/css">
div
{
position: fixed;
width: 10em;
}
#header
{
top: 0;
background-color: lavender;
}
#footer
{
bottom: 0;
background-color: pink;
}
#menu
{
overflow: scroll;
}
</style>
</head>
<body>
<div id="header">
header
<br>
header
</div>
<div id="menu">
menu
<br>
menu
</div>
<div id="footer">
footer
<br>
footer
</div>
</body>
</html>