Make the container div equal to the height of one child div, and make the other child div equal the height of the container
First of all, sorry about that title. I'm not the best at writing these things.
I have a container div (let's call it #container) that contains two divs (#a and #b). I have no control over the content of these two divs.
I want the #container to be #a height. I also want #b to stretch (or shrink, depending) to 100% of the #container, and have a scrollbar as needed.
It looks like it should be incredibly easy, but I've spent hours trying to get this to work.
If 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 uncontrolled heights. # 2 should be 100% of #a minus height # 1.
Please tell me one of them is possible!
source to share
I love these CSS changes (in a masochistic way). I'm pretty surprised when I came 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 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 where the left is larger than the right and still works.
It's probably worth adding a DOCTYPE to force IE into a slightly less sucky mode.
source to share