HTML/CSS table right align text not working in IE

Question

Again, Internet Explorer is not getting easy on me. I have a table with two cells in the same row. I want to display some text aligned to the left (first cell), and another one aligned to the right (second cell). This is working fully in Chrome and Firefox, but in IE all the text appears left-aligned:

<table width="660px">
<tr>
    <td align="left" width="160px">Text 1</td>
    <td align="right" width="160px">Text 2</td>
</tr>

​​​​​​​​​​​​​

After some research I wondered if I should put it on the CSS, so I changed it to:

HTML:

<table class="anchors" width="660px">
<tr>
    <td class="left" width="160px">Text 1</td>
    <td class="right" width="160px">Text 2</td>
</tr>

CSS:

table.anchors td.left
{
    text-align: left;
}

table.anchors td.right
{
      text-align: right;
}

It still doesn't work in IE (version 9, at least). Does anybody has a hint on this? Should I be using something else (a div, e. g.)?

Solution 1

The code is syntactically malformed (width attributes take numeric or percentage values, not with px units), though this pardoned by browsers. More seriously, you are setting conflicting requirements: the table should be 660 pixels wide but consist of two 160 pixels wide cells. It is not surprising that browser behavior is inconsistent.

However, IE 8 and IE 9 behave like other browsers when in “Standards Mode”. Otherwise, in Quirks Mode, anything may happen, and you cannot call it a bug, because the document is non-conforming. So add an adequate doctype declaration.

In addition, it is best to avoid conflicting requirements. If you need to set a total width on the table in pixels, so be it. Then either set column widths so that they add up or, simpler, set e.g. the widths to 50% (for a two-column table that should be balanced).

Solution 2

http://jsfiddle.net/6jvnQ/

Can you change the width of the table so that it is as wide as the two cells? I suspect you get differing results because the weird widths.