CSS Same Height Columns with One Column Containg Bottom Div

[3Pac]

I'm desperate to not use tables (not that tables will work) but we have a situation where the user wants 3 column divs floating with one div having two divs, one of which needs to be displayed at bottom of the div. Maybe I need to rethink the whole process and persuade user to keep it simple.Anyway here is my code:\[code\]<style> #outer-div { overflow: hidden; background-color: grey; } #column-one { padding-bottom: 500em; margin-bottom: -500em; background-color: red; width: 200px; float: left; } #column-two { padding-bottom: 500em; margin-bottom: -500em; background-color: green; width: 200px; float: left; } #column-three { padding-bottom: 500em; margin-bottom: -500em; background-color: blue; width: 200px; float: left; } #column-one-bottom { position: absolute; bottom: 0; background-color: pink; }</style><div id="outer-div"> <div id="column-one"> <div id="column-one-top"> Column One Top Data<br/> Column One Top Data<br/> Column One Top Data<br/> Column One Top Data<br/> Column One Top Data<br/> </div> <div id="column-one-bottom"> Column One Bottom Data </div> </div> <div id="column-two"> Column Two Data<br/> Column Two Data<br/> Column Two Data<br/> Column Two Data<br/> Column Two Data<br/> Column Two Data<br/> Column Two Data<br/> Column Two Data<br/> Column Two Data<br/> Column Two Data<br/> </div> <div id="column-three"> Column Three Data<br/> Column Three Data<br/> Column Three Data<br/> Column Three Data<br/> </div> <br style="clear: both;"/></div>\[/code\]See http://jsfiddle.net/Zre8D/2/Hope someone can help.The problems is with #column-one-bottom. I need this to be bottom of it's parent, not middle of div.