I am trying to specify independent vertical alignment attributes for text and iframe elements contained within the same table cell but nothing I do seems to work. What I want is for the text to align to the top of the cell and the iframe (embedded Youtube link) to align bottom. Can this even be done, or should I split each table cell into two further cells? The HTML as it currently stands is below (CSS file is accessed remotely).

 

<td height="360">

<p class="q">

<span class="quote">“blah blah blah blah.”</span>

<br>- Ben Smith</p>

<iframe src="xxxxxxxxxxxxxxxxxxxxxxxxx" allowfullscreen="" style="float: left; margin-bottom: 5px;" frameborder="0" height="225" width="348"></iframe>

</td>

I'm sure you can't make one table cell have both vertical-align: top and vertical-align: bottom so it looks as if you will have to have a table cell on two rows possibly with zero cellspacing (cellpadding).

 

You could use div or display: table-cell instead of table cells but I think you would still need to use two.

Edited October 8, 201213 yr by Wickham

Not sure exactly what this data is but is it tabular?

If not, you shouldn't be using stable anyway but should be using other semantic structural elements.

Could you upload your code any where

I'm also suspecting that you shouldn't be using a table here. But assuming that you are using it consciously (there are also some situations when this happens), here you go:

 

You can align the text to the top in the cell and position the iframe absolutlely and pull it to the bottom. For this to work, you will have have to assign a width to the cell, because the iframe won't occupy any space, and also position it relatively.

td{
  position:relative;
  height:360px;
  width:500px;
  vertical-align:top;
}
iframe{
  position:absolute;
  bottom:0;
}

Edited October 9, 201213 yr by ocorreiododiogo