6 replies [Last post]
pepejeria
Offline
Regular
Munich
Last seen: 18 years 24 weeks ago
Munich
Joined: 2003-12-01
Posts: 45
Points: 0

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>

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 5 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

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)... Smile

The next sentence is true. The previous sentence is false. Discuss...

pepejeria
Offline
Regular
Munich
Last seen: 18 years 24 weeks ago
Munich
Joined: 2003-12-01
Posts: 45
Points: 0

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).

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 28 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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

pepejeria
Offline
Regular
Munich
Last seen: 18 years 24 weeks ago
Munich
Joined: 2003-12-01
Posts: 45
Points: 0

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%...

Sad

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.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 28 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Fill out rest of space

Hi

Can't think of a solution whilst you use an iframe.

Trevor

pepejeria
Offline
Regular
Munich
Last seen: 18 years 24 weeks ago
Munich
Joined: 2003-12-01
Posts: 45
Points: 0

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.