Aligning a DIV within a table cell

Question

Hello,

I have an HTML table with three columns. In the right most column, I want to right-align the content. In an attempt to do this, I have the following:

<table border='0' cellpadding='0' cellspacing='0' style='width:100%;'>
  <tr>
    <td>Content 1</td>
    <td>Content 2</td>
    <td style='text-align-right'>Content 3</td>
  </tr>
</table>

The content in the third cell is actually generated via some server-side code. When the generate content is text, the content is aligned properly. However, when I attempt to right-align a DIV element that is within the third cell, it does not do it. The DIV is always left-aligned. How do I right-align a DIV within a table cell?

Thank you!

Answer 1

Put a class to the td

<td class="rightAlign">

and define a css class with the text-align property with !important

.rightAlign{
    text-align: right !important
}

this will make the DIV inherit the right alignment.

Answer 2

Try:

<td><div style="float: right;"></div></td>

Answer 3

Your code should look like this to meet both div and non-div situations:

<td style="text-align:right;">
  <div style="float: right;" align="right"></div>
</td>