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>