¿Cómo alinear verticalmente una columna de la mesa tanto arriba como abajo?

Question

..si la altura de las columnas depende de la altura de otra columna? La solución debería funcionar en IE6,7 y Mozilla al menos.

HTML diseño de la mesa:

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

Answer 1

La forma más fácil debería ser sólo tiene que utilizar vertical-align parte superior e inferior de las celdas que desea alinear:

<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> 

y luego el CSS:

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

Copiar | Pegar

Answer 2

Si no desea utilizar tablas, se podría hacer algo como esto:

<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

utilizar el atributo rowspan (http://www.htmlcodetutorial.com/tables/index_famsupp_30.html) para hacer un fragmento de texto largo (columna2) dos filas. A continuación, coloque el Para1 en la primera columna de la primera fila (alinee la parte superior), luego, Para2 en la primera columna de la segunda fila (alinee la parte inferior).

-------------------------------------- 
|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.    | 
--------------------------------------