title: Why "display: table-cell" is broken when "position: absolute"
body: <p>I ran into a strange problem. I use DIV as a container, and put an image into this DIV. I want this image to be aligned vertically to bottom. The following code works.</p>
  
  <pre><code>#banner { 
    width: 700px; 
    height: 90px; 
    top: 60px; 
    left: 178px; 
    overflow: hidden; 
    text-align: center; 
    display: table-cell; 
    vertical-align: bottom; 
    position: relative;
  }
  
  &lt;div id="banner"&gt;
    &lt;img src="http://www.google.de/intl/de_de/images/logo.gif"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But if I change the css code "position: relative" to "position: absolute", the image cannot be aligned to bottom any more. Is this a bug of Firefox3? How can I solve this problem?</p>
  
  <p>My current solution is:</p>
  
  <pre><code>&lt;div id="banner"&gt;
    &lt;table width="100%" height="100%"&gt;&lt;tr&gt;&lt;td valign="bottom" align="center"&gt;
    &lt;img src="http://www.google.de/intl/de_de/images/logo.gif"/&gt;
    &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I do not like this solution.</p>