ansaurus

Question

Make container div be height of one child div, AND make the other child div height of container

Answer 1

+1 A:

I love these CSS changes (in a masochistic kind of way). I am rather surprised to have come up with a solution:

<html>
<head>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
#container { width: 600px; height: auto; margin: 0 auto; background: orange; position: relative; }
#left { background: green; width: 300px; }
#right { overflow: auto; background: yellow; width: 300px; position: absolute; top: 0; bottom: 0; right: 0; }
</style>
</head>
<body>
<div id="container">
<div id="left">
<p>f this is not possible, I would settle for this: #container has a fixed height, #b has a fixed height. #a has two block-level elements (#1 and #2) that have uncontrollable heights. #2 should be 100% of #a, minus the height of #1.</p>
<div id="right">
<p>I have a container div (let's call it #container) which contains two divs (#a and #b). I am not in control of the content of these two divs.</p>
<p>I want #container to be the height of #a. I also want #b to stretch (or shrink, depending) to 100% of #container, and have a scrollbar, if necessary.</p>
</div>
</div>
</body>
</html>

Try it where left is larger than right and it still works.

It's' probably worth adding a DOCTYPE to force IE into a slightly less sucky mode.

cletus 2009-09-05 08:45:25

Amazing! That works perfectly! Thank you so much.

Alan 2009-09-05 17:17:30

After some more work, this isn't quite perfect. It doesn't work in IE6, as described in this ALA article: http://www.alistapart.com/articles/conflictingabsolutepositions/ (curses!) Since I already had a conditional stylesheet for IE6, I just absolutely positioned div#right in the top-right, and gave it a fixed height. It doesn't stretch to the height of #container, but at least it doesn't go straight through the bottom of #container like it used to.

Alan 2009-09-12 23:18:46

ansaurus

tags:

views:

answers:

Make container div be height of one child div, AND make the other child div height of container

related questions