positioned three blocks in the table-cell - html

Question

How to position three blocks in the table-cell follows: p1 top, p2 bottom, p3 in the middle?
The html as next:
<div id="table">
<div id="row">
<div id="r2"></div>
<div id="r3"></div>
<div id="r1">
<div id="p1">top</div>
<div id="p3">middle</div>
<div id="p2">bottom</div>
</div>
</div>
</div>
CSS
#table{
display: table;
width:500px;
height:500px;
max-height:500px;
min-height: 500px;
}
#row{
display:table-row;
}
#r1, #r2, #r3{
display:table-cell;
}
Details - http://jsfiddle.net/2ZF6J/

Answer 1

IE7 does not support display: table so you can just simply use floats and absolute positioning.
HTML:
<div id="wrapper">
<div id="r2"></div>
<div id="r3"></div>
<div id="r1">
<div id="p1">top</div>
<div id="p3">middle</div>
<div id="p2">bottom</div>
</div>
</div>
CSS:
#wrapper {
width:500px;
height: 1px;
min-height: 300px;
}
#r1 {
position: relative;
width: 177px;
border:1px solid black;
}
#r3 {
width: 156px;
background-color: #aef;
}
#r2 {
width: 161px;
border:1px solid black;
background-color: #eee;
}
#r1, #r2, #r3 {
float: left;
height: 100%;
}
#p1, #p2, #p3 {
position: absolute;
width: 100%;
}
#p1 {
top: 0;
background-color: gold;
}
#p2 {
bottom: 0;
background-color: crimson;
}
#p3 {
top: 50%;
margin-top: -0.5em;
background-color: orange;
}
See it here: http://jsbin.com/ekImIYih/3