ONE <td> TWO valign properties

[chasethemetal]

Hey all!So here is my issue:I have two columns that have a CSS drawn background and border.Column 1: I need one table to always be aligned to the TOP and one table always to be aligned to the BOTTOM.Column 2: Information in this column changes and forces a gap between info 1 and 2 in first column.BUT each Column has to have 1 encapsulating background styleThis isnt my exact code, but this models how I have it structured and would like to know how I could make this work. Thanks so much.<style type="text/css">#background { background:#f8f8f9; border:1px solid #5b7390; border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px;}</style><table width="500"> <tr> <td id="background"> <table width="200"> <tr> <td> INFO 1 TOP ALIGN </td> </tr> </table> <table width="200"> <tr> <td> INFO 2 BOTTOM ALIGN </td> </tr> </table> </td> <td> INFO 3 HERE DYNAMICALLY GET'S BIGGER AND SMALLER. FORCING A GAP BETWEEN INFO 1 and INFO 2. </td> </tr></table>

[pjsfchaplin]

First off, using tables for layout is discouraged, and using nested tables even more so.From the way you've posed the question, do I take it that "info 1" and "info 2" will have fixed, known dimensions?If so, I'd recommend using absolute positioning on info 2, with the "bottom" attribute set to 0, and with a min-height on the container.Something like:<style type="text/css">#container { min-height: 400px; position: relative padding-left: 200px;}#info1 { position: absolute; top: 0; left: 0; height: 200px; width: 200px;}#info2 { position: absolute; bottom: 0; left: 0; height: 200p; width: 200px;}</style><div id="container"> <div id=info1"> INFO 1 </div> <div id="info2"> INFO 2 </div> INFO 3</div>