Jump to content

2 divs sharing height


dj kim

Recommended Posts

HiI had following problem several times:I have a block e.g. a div whit a defined height and inside 2 divs, one also with a defined height. How can I have the other div taking all the height left?My code:

<div id="container" style="height:100px; width:100px;">   <div id="sub1" style="height:20px; background-color:green; margin:0px;"></div>   <div id="sub2" style="???????????; background-color:red;     margin:0px;"></div></div>

What has the style for sub2 to be in order to get the upper 20px in green and the lower in red? Without putting the height to 80px of course... in order to be flexible when changing height of container.Would apreciate your help a lot

Link to comment
Share on other sites

80% in sub2 and 20% to sub1?[edit]posted similtaniously with pulpfiction :) [/edit]

Link to comment
Share on other sites

Oh well... another idea:Apply all the properties of sub2 to the container. This creates the illusion that it's sub2 which is configured. This would look ugly if there were margins though.

Link to comment
Share on other sites

dj,Why do you not want to give sub2 a specific height (of 80px)? I only ask, because if you need container to be 100px, and you need sub1 to be 20px, and you need sub2 to take up the rest, there should be nothing wrong with setting sub2 to 80px. Is there?

hi thundercadeWell if i want to change the containers height because of design changes. In this case it would not be to hard but with more complex design with cascaded boxes etc. Let's say container is a box which hasn't got a fix pixel-height but takes 20% of the body height...The point is I had some designs where I put it in the end with all fix heights, like you suggest. Then if there was something to change, like adding some pixels to the top-boxes height...I had to change all heights of the childs, childs chils, and so on... :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...