Float:right specified for a div inside a table cell seems to have no effect in IE. I have also tried text-align right, among other things, to align the layer contents to the right, but without success in IE 7.
CSS snippet:
.workloadcell { background-color: #E6D7E9; padding: 0px; width: 14px; height: 16px; text-align: right; } div.workload { background-color: #E6D7E9; text-align: right; width: 14px; float: right; } HTML snippet:
<td class='workloadcell'> <div class='workload'> 1 </div> </td> Both the HTML and the CSS validate, and in Firefox the text aligns right, as it should. If you want to test the complete code by copy/pasting it, it’s here:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <head> <meta http-equiv='Content-Type' content='text/html;charset=iso-8859-1'> <title>Table Test</title> <style type='text/css'> td { border: 1px solid black; } .workloadcell { background-color: #E6D7E9; padding: 0px; width: 14px; height: 16px; text-align: right; } div.workload { background-color: #E6D7E9; text-align: right; width: 14px; float: right; } </style> </head> <body> <table> <tr> <td> </td> <td colspan='4'> <div> 2008 </div> </td> </tr> <tr> <td> </td> <td> <div> Q1 </div> </td> <td> <div> Q2 </div> </td> <td> <div> Q3 </div> </td> <td> <div> Q4 </div> </td> </tr> <tr> <td> workload forecast </td> <td class='workloadcell'> <div class='workload'> 1 </div> </td> <td class='workloadcell'> <div class='workload'> 2 </div> </td> <td class='workloadcell'> <div class='workload'> 2 </div> </td> <td class='workloadcell'> <div class='workload'> 2 </div> </td> </tr> <tr> <td> actual workload </td> <td class='workloadcell'> <div class='workload'> 3 </div> </td> <td class='workloadcell'> <div class='workload'> 3 </div> </td> <td class='workloadcell'> <div class='workload'> 2 </div> </td> <td class='workloadcell'> <div class='workload'> 3 </div> </td> </tr> </table> </body> </html> (I know that the CSS is are not optimal in the sense that the class declarations are repeated for several elements, but please don’t comment on this, if it is not relevant to the problem.)
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.
The solution for IE is to either not define a width or to make it wide enough to accomodate the header.