Stretch div according to another one - html

Question

I have the following code:
#left {
width:383px;
margin:0px;
float: left;
position:relative;
}
.bg_top{
background: transparent url(../bg_top.png) no-repeat;
width: 383px;
height: 140px;
}
.bg_middle{
background: transparent url(../bg_middle.png) no-repeat;
width: 383px;
height: 100%;
}
.bg_bottom{
background: transparent url(../bg_bottom.png) no-repeat;
width: 383px;
height: 131px;
}
#left_inner{
width:375px;
border:2px solid #98b73f;
position: absolute;
top: 5px;
}
<div id='wrap'>
<div id='left'>
<div class='bg_top'>
bg_top
</div>
<div class='bg_middle'>
bg_middle
</div>
<div class='bg_bottom'>
bg_bottom
</div>
<div id='left_inner'>
<p>long text</p></div</div</div>
I want the bg_middle class to stretch to the height of the left_inner div. I have tried with height 100% and searched the net for answers. I'm new in the world of css. I think I have to connect the 3 divs that are the background to the inner div somehow...

Answer 1

With the HTML as is it you can't do it without Javascript. Block elements adjust in height to their container. Si if the goal is to use a background-image just apply it to the left-inner. Don't use position absolute 'cause that block would postion itself indepent from the content flow.
Given that you have fixed heights you can use min-height in case there's not enough content.
I'm not sure this is what you're looking for.

Answer 2

I would strongly recommend to do something different here..
However this is the solution I suggest with the original approach:
#left {
width:383px;
margin:0px;
position: relative;
}
.bg_bottom{
background: transparent url(../bg_bottom.png) no-repeat;
height: 131px;
position: absolute;
bottom: 0;
z-index: -1
}
.bg_top{
background: transparent url(../bg_top.png) no-repeat;
height: 140px;
position: absolute;
top: 0;
z-index: -1
}
.bg_middle{
height: 100%; /* it does work*/
background: transparent url(../bg_middle.png) repeat top left;
position: absolute;
z-index: -2;
}
height= 100% works if the parents (or at least one) have a height (100% of 0 is 0).
You can cascade starting with the html
html, body{height: 100%;}
Or you can just give the #left a height or min-height
This should work

Answer 3

Thanks to all,
Last night I found a way around this. This is my final approach, it still needs some small adjustments, but it works (for now).
<div id="wrap">
<div id="header"></div>
<div id="main">
<div class='bg_top'></div>
<div class='bg_middle'>
<div>LONG LONG TEXT</div>
</div>
<div class='bg_bottom'></div>
</div>
#wrap{
width: 800px;
margin: 0px auto;
border: 1px solid black;
}
.bg_top{
background: transparent url(../bg_top.png) no-repeat;
height: 140px;
}
.bg_middle{
background: transparent url(../bg_middle.png) repeat;
}
.bg_middle div{
margin:-130px 10px -100px 10px;
border:1.5px solid #98b73f;
}
.bg_bottom{
background: transparent url(../bg_bottom.png) no-repeat;
height: 131px;
}
#main {
float:left;
width:500px;
margin-left:0px;
padding:10px;
}
Thanks #Maroshii for the reply. I will also try your approach, but for now I'll stick to this. Hope I will not have to change a lot for browser compatibility :)