Forum Moderators: not2easy
How do I achieve, that my second nested div uses the remaining space? If I set height to auto, it only uses as much space as the content of it uses. If I use 100%, it takes up 100% of the parent, in this case 200px, where it should use 200px-20px = 180px.
Any advice?
Here's an example:
<html>
<head>
<title>none</title>
<style type="text/css">
#outter {
width: 200px;
height: 200px;
background-color: green;
border: 1px solid green;
}
#one {
width: 100%;
height: 50px;
background-color: red;
}
#two {
width: 100%;
height: auto;
background-color: blue;
</style>
</head>
<body>
<div id="outter">
<div id="one"></div>
<div id="two"></div>
</div>
</body>
</html>
Alternativley work out the % the first div uses out of 200px then use the remaining % for div two.
It should be dynamic. In this case, I could set the height of the second div to 180px, right! BUT: I want to set 'outter' to 90% height, so it will change when you resize your window. Since the first one has a fixed value, I cannot use a percentage for the second one...
That's why I want it to use 'the remaining space' from the outter div.
#outter {
position:relative;
width: 200px;
height: 90%;
background-color: green;
border: 1px solid green;
}
#one {
position:absolute;
top:0; left:0;
width: 100%;
height: 50px;
background-color: red;
}
#two {
width: 100%;
height: 100%;
background-color: blue;
}
#twoagain {
padding:50px 0 0 0;
}
<div id="outter">
<div id="one">content</div>
<div id="two"><div id="twoagain">content</div></div>
</div> [edited by: Ingolemo at 1:50 pm (utc) on Sep. 28, 2006]
I'll have to check if it fits in the whole CSS layout, but I think this really might work!
Thanks alot!
