Welcome to WebmasterWorld Guest from 54.144.206.214

Forum Moderators: not2easy

Expand inner DIV

   
8:56 am on Sep 28, 2006 (gmt 0)

5+ Year Member



I have a DIV, let's call it 'outter', and two divs nested in that one. Outter is 200px high, the first nested div is 20px high.

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>
9:43 am on Sep 28, 2006 (gmt 0)

10+ Year Member



Set the second inner div to 180px in height?

Alternativley work out the % the first div uses out of 200px then use the remaining % for div two.

11:35 am on Sep 28, 2006 (gmt 0)

5+ Year Member



Oh, I forgot to mention ;-)

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.

1:35 pm on Sep 28, 2006 (gmt 0)

5+ Year Member



It needs a little extra markup, but how about taking the fixed height div out of the flow and making room for it later using padding instead:

#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]

4:26 pm on Sep 28, 2006 (gmt 0)

5+ Year Member



Mhh...nice approach indeed!

I'll have to check if it fits in the whole CSS layout, but I think this really might work!

Thanks alot!

 

Featured Threads

Hot Threads This Week

Hot Threads This Month