Question

I want to implement 3 DIVs inside a container, just like table rows

top {height = 100px} / middle {height = dynamic} / bottom {height = 100px}

Now the question is what is the best approach to have the middle div’s height dynamic and keep the structure correct.

• Here’s what I’ve done 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;
}

Answer 1

This here worked for me

#notification {
    position:absolute;
    left:10px;
    top:10px;
    width:175px;
    background: yellow;
}

#n-top {
    position:relative;
    left:0px;
    top:0px;
    width:175px;
    height:50px;
    background: blue;
}

#n-middle {
    position:relative;
    left:0px;
    width:175px;
    background: red;
}

#n-bottom {
    position:relative;
    display:block;
    left:0px;
    bottom:0px;
    width:175px;
    height:50px;
    background: green;
}

Remember that absolute postitionning removes the element from then normal flow of the page. The way you had it had all the elements placed in absolute postionning. Therefore, they didn’t hold their position within the page. Hence, the following elements were bascially looking to be placed at the top. Having the position relative, the location of the element is preserved on the page, and the next one is looking to be place after.

Hope this makes sense.