Dynamic vertical spacing without overflow

I have tried to understand how to use css instead of tables to do layout.
But there's one thing I can't crack. And it's a very simple case too.
I want three horizontal blocks. Altogether they should cover the full height of the browser window.
The upper and the bottom blocks here just happens to be 1em high. But i don't want to assume that.
In theory, they should be "as high as their contents requires". Then of course, the middle block
should take the rest of the vertical space. Now I have noticed that unlike when
working with tables, giving height:100% here doesn't mean "all that's available", but "100% of the
parent container's dimension". This is why I don't know how to achieve this. Using this faulty code
below causes the #container div to overflow so that I have to scroll.
Is this possbile to do? Or would I need to stick with tables? If it's not doable with css,
then any argument on why it shouldn't be?

Gustav




<html>
<head>
  <style type="text/css">
  #container {
    height: 100%;
  }
  #red {
    background-color: red;
    height: auto;
  }
  #green {
    background-color: green;
    height: 100%;
  }
  #blue {
    background-color: blue;
    height: auto;
  }
  </style>
</head>
<body>
  <div id="container">
    <div id="red">1</div>
    <div id="green">2</div>
    <div id="blue">3</div>
  </div>
</body>

Received on Wednesday, 5 March 2003 13:01:14 UTC