homepage Welcome to WebmasterWorld Guest from 54.211.68.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Expand inner DIV
socken




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

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>

 

collymellon




msg:3100203
 9:43 am on Sep 28, 2006 (gmt 0)

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.

socken




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

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.

Ingolemo




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

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]

socken




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

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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved