Mon, 2004-05-03 07:26
I would like to make div2 to fill out the rest of the available space in the wrapper div. How can I do this? Now it gets the width 100% + the 20px that div1 has. Look in either Mozilla or Opera to see this behavior.
Is it possible with CSS to somehow make the div2 use the existing space in wrapper after div1?
<style type="text/css">
#wrapper
{
border:1px solid orange;
width:100px;
height:400px;
}
#wrapper #div1
{
height:20px;
background:red;
}
#wrapper #div2
{
height:100%;
background:#ccc;
}
</style>
<div id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
</div>
Mon, 2004-05-03 14:05
#1
Fill out rest of space
Since you've specified the height of the wrapper as 400px, why don't you set div2 to 380px? Or was this simply for an example?
Do you need a div2? Can't you place the content in the wrapper div, immediately after the div1? This would save a lot of bother. Let us know if div2 is needed (and what for)... 
Mon, 2004-05-03 16:00
#2
Fill out rest of space
Yes, div 2 is needed. This will actually be an iframe with designmode set to on (Mozilla and IE only)...
And no, I cant set the height for that element to px since this wrapper will also be resized. I guess that, in worst case I will have to calculate the height for the iframe as well (wrapper height - div1 height).
Mon, 2004-05-03 17:35
#3
Fill out rest of space
Hi
Is Div one also fluid height, or can this be fixed?
If fixed, then (assuming outer wrapper starts at top of page)
Outer Wrapper contains div 2 then div 1
Div 1 is position:absolute and top:0, which will push it back to the top of the page, ehight fixed.
Div 2 has margin-top set to clear Div 1.
Does that make sense, and work?
Trevor
Mon, 2004-05-03 17:58
#4
Fill out rest of space
Yes, div 1 has a fixed height of 20px
Thanks for the help, but this ends up having the same problem that I had before. Because div 2 will have a height of 100% + 20px of margin-top making it bigger than 100%...
Check it out:
<style type="text/css">
#wrapper
{
position:absolute;
left:100px;
top:100px;
border:1px solid orange;
width:100px;
height:400px;
}
#wrapper #div1
{
width:100%;
position:absolute;
top:0;
height:20px;
background:red;
}
#wrapper #div2
{
margin-top:20px;
height:100%;
background:#ccc;
}
</style>
<div id="wrapper">
<div id="div2"></div>
<div id="div1"></div>
</div>
P.S I am coding in standards compliance mode. So the padding and margin is not included in the elements height/width.
Mon, 2004-05-03 18:06
#5
Fill out rest of space
Hi
Can't think of a solution whilst you use an iframe.
Trevor
Mon, 2004-05-03 18:08
#6
Fill out rest of space
I guess I will calculate the height of the iframe when i resize the wrapper (using drag and drop)
Anyway, thanks for the tips.