W3C home > Mailing lists > Public > www-style@w3.org > March 2003

Dynamic vertical spacing without overflow

From: Gustav Svensson <gurra16@spray.se>
Date: Wed, 05 Mar 2003 19:00:45 +0100
To: www-style@w3.org
Message-ID: <1046887245008742@lycos-europe.com>
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?


  <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;
  <div id="container">
    <div id="red">1</div>
    <div id="green">2</div>
    <div id="blue">3</div>
Received on Wednesday, 5 March 2003 13:01:14 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:06 UTC