title: How can I get right-alignment to work in a div inside a table cell for IE 7?
body: <p><code>Float:right</code> specified for a <code>div</code> 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. </p>
  
  <p>CSS snippet:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>HTML snippet:</p>
  
  <pre><code>&lt;td class="workloadcell"&gt;
      &lt;div class="workload"&gt;
          1
      &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"&gt;
          &lt;title&gt;Table Test&lt;/title&gt;
          &lt;style type="text/css"&gt;
  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;
  }
  &lt;/style&gt;
      &lt;/head&gt;
  
  
  
  &lt;body&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td colspan="4"&gt;
                      &lt;div&gt;
                          2008
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &amp;nbsp;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div&gt;
                          Q1
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div&gt;
                          Q2
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div&gt;
                          Q3
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;div&gt;
                          Q4
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      workload forecast
                  &lt;/td&gt;
                  &lt;td class="workloadcell"&gt;
                      &lt;div class="workload"&gt;
                          1
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td class="workloadcell"&gt;
                      &lt;div class="workload"&gt;
                          2
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td class="workloadcell"&gt;
                      &lt;div class="workload"&gt;
                          2
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td class="workloadcell"&gt;
                      &lt;div class="workload"&gt;
                          2
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      actual workload
                  &lt;/td&gt;
                  &lt;td class="workloadcell"&gt;
                      &lt;div class="workload"&gt;
                          3
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td class="workloadcell"&gt;
                      &lt;div class="workload"&gt;
                          3
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td class="workloadcell"&gt;
                      &lt;div class="workload"&gt;
                          2
                      &lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td class="workloadcell"&gt;
                      &lt;div class="workload"&gt;
                          3
                      &lt;/div&gt;
                  &lt;/td&gt;
                          &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>(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.)</p>