My goal is to create a layout with 3 DIVs inside a container, similar to table rows.
top {height = 100px} / middle {height = dynamic} / bottom {height = 100px}
I am trying to figure out the best approach to make the height of the middle div dynamic while maintaining the correct structure.
- Here is the progress I have made so far: http://jsfiddle.net/pvPSD/4/
HTML
<div id="notification">
<div id="n-top">
top
</div>
<div id="n-middle">
middle<br /><br /><br /><br /><br />middle
</div>
<div id="n-bottom">
bottom
</div>
</div>
CSS
#notification {
position:absolute;
left:10px;
top:10px;
width:175px;
background: yellow;
}
#n-top {
position:absolute;
left:0px;
top:0px;
width:175px;
height:50px;
background: blue;
}
#n-middle {
position:absolute;
left:0px;
top:14px;
width:175px;
background: red;
}
#n-bottom {
position:absolute;
display:block;
left:0px;
bottom:0px;
width:175px;
height:50px;
background: green;
}