CSS : Clamp divs to top and bottom in an inline container - html

Question

[SOLVED]
Here's the Fiddle
<div id="container">
<div class="content">
<div class="column">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="column">
<div class="top">
TOP
</div>
<div class="bottom">
BOTTOM
</div>
</div>
<div class="column">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</div>
#container .content .column {
position: relative;
display:inline-block;
height: 100%;
width: 100px;
border: 1px solid red;
}
#container .content .top,
#container .content .bottom {
position: absolute;
background-color: #AAA;
}
#container .content .top {
top: 0;
}
#container .content .bottom {
bottom: 0;
}
#container {
min-height: 349px;
}
I have three inline columns, the left and right ones have the same dynamic height (they contain generated tables with a variable number of rows)
I want the middle column to have the same height as its neighbours and I want his TOP div to clamp to the top and BOTTOM div to clamp to the bottom.
I've read this thread but can't manage to make it work.
Any idea what I'm doing wrong ?
Thanks a lot !
EDIT
Using Sowmya's solution :
JS Fiddle
<div id="container">
<div style="position: relative;">
<div class="content">
<div class="column">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
<div class="column">
<div class="top">
TOP
</div>
<div class="bottom">
BOTTOM
</div>
</div>
<div class="column">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</div>
</div>
</div>
#container .content .column {
display:table-cell;
height: 100%;
width: 100px;
border: 1px solid red;
vertical-align: top;
}
#container .content .top,
#container .content .bottom {
position: absolute;
background-color: #AAA;
}
#container .content .top {
top: 0;
}
#container .content .bottom {
bottom: 0;
}

Answer 1

Use display:table-cell; to .column
#container .content .column {
position: relative;
display:table-cell;
height: 100%;
width: 100px;
border: 1px solid red;
}
DEMO