How to vertically align a table column both top and bottom?

Question

..if the columns height is dependent on the height of another column? Solution should work on IE6,7 and Mozilla at least.

HTML table layout:

 +------------------------+----------------------+
 | top-aligned paragraph  |     Here             |
 |                        |     is a             |
 |                        |     very             |
 |                        |     long             |
 |                        |     text             |
 |                        |     that             |
 |                        |     eventually       |
 |                        |     determines       |
 |                        |     the overall      |
 |bottom-aligned paragraph|     table height.    |
 +------------------------+----------------------+
 

Answer 1

The easiest way should be to just use vertical-align top and bottom in the cells that you wish to align:

<table>
<tr>
<td class="top">
<p>Top aligned paragraph</p>
</td>
<td rowspan="2">
<p>Lorem ipsum dolor sit amet consectetuer id egestas condimentum neque elit. Non tortor tempus orci quis condimentum interdum dictum pede Duis enim. Sociis sollicitudin Nulla lacinia risus id sit odio pellentesque Vestibulum et. Ipsum pretium vestibulum et lobortis mauris semper In In id faucibus. Est Integer Curabitur dui Quisque eu habitasse Curabitur gravida vel semper. A libero vel nisl.</p>
</td>
</tr>
<tr>
<td class="bottom">
<p>Bottom aligned paragraph</p>
</td>
</tr>
</table>

and then the CSS:

.top{
vertical-align:top;
}
.bottom{
vertical-align:bottom;
}

Copy|Paste away

Answer 2

If you don’t want to use tables, you could do something like this:

<style type="text/css" media="screen">
    .outer {
        position: relative;
        background-color: #EEE;
    }
    .right {
        width: 50%;
        margin-left: 50%;
        background-color: #F88;
    }
    .top,
    .bottom {
        position: absolute;
        width: 50%;
    }
    .top {
        top: 0;
        background-color: #8F8;
    }
    .bottom {
        bottom: 0;
        background-color: #88F;
    }
</style>

<div class="outer">
    <div class="right">Here<br>is a<br>very<br>long<br>text<br>that<br>eventually<br>determines<br>the overall<br>table height.</div>
    <div class="top">top-aligned paragraph</div>
    <div class="bottom">bottom-aligned paragraph</div>
</div>

Answer 3

Use the rowspan attribute (http://www.htmlcodetutorial.com/tables/index_famsupp_30.html) to make the long text (column2) span two rows. Then put the Para1 in the first column first row (align top), then Para2 in the first column second row (align bottom).

--------------------------------------
|Para 1 Align Top |This is your very |                   
|                 |long text.  This  |
|                 |is your very long |
|_________________|text.             |
|                 |This is your very |
|                 |long text.  This  |
|                 |is your very long |
|Para2 align bottm|Text.             |
--------------------------------------