CSS problem with IE - right-alignment does not work in a div inside a table cell

Answer 1

You don't need to declare rules for the div.workload. Use only this rules and everything will work fine:

 td {
    border: 1px solid black;
     }

 .workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 20px;
    height: 16px;
    text-align: right;
    }

Answer 2

It should work the way you have it (or the way alexmeia suggests).

But, (this being IE), the headers Q1, Q2, etc. are pushing the table columns wider than the 14 px you've requested.

The columns are right justified within the 14px you've defined, but the divs are not moving to the right in IE. (The div is staying within the 14px defined for it even though the column is actually wider than 14px)

To illustrate this, you can either make the width say 28px or change the color of one of the backgrounds to demonstrate the difference between the td and the div within in.

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6EEE9;
    text-align: right;
    width: 14px;
    float: right;
}

The solution for IE is to either not define a width or to make it wide enough to accomodate the header.

Answer 3

It's worth noting, that IE, especially v6 on pre SP1 XP, and older windows has serious rendering issues when you intermingle tables within divs, and divs within those tables. Once you exceed a certain complexity & nesting you may get a blank/white page.

If your needing to right-align text content in certain cells, I would suggest adding an additional class declaration to the td tag, not nesting a div. I would also suggest trying in IE8, and see if the issue persists. You didn't mention which versions you need to support.