title: Positioning problems in Firefox? position:relative for a display:table element
body: <p>i'm experiencing the weirdest positioning problem that appears only in firefox.</p>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;article id="one" class="layer"&gt;&lt;/article&gt;
  &lt;article id="two" class="layer"&gt;&lt;/article&gt;
  &lt;article id="three" class="layer"&gt;
     &lt;div class="left"&gt;&lt;/div&gt;
     &lt;div class="right"&gt;&lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><strong>My CSS:</strong></p>
  
  <pre><code>html, body {
    margin: 0; padding: 0;
    height: 100%;
    width: 100%;
  }
  
  article.layer {
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
  }
  
  article .left, article .right {
    position:absolute;
    width: 50%;
    height: 100%;
    min-height:100%;
    display:table;
  }
  
  article .left { left: 0; top: 0; }
  article .right { left: 50%; top: 0; }
  </code></pre>
  
  <p>So each article is set to <code>display:table</code> and 100% width and 100% height. The body and html is also 100% wide and high. Therefore each article is exactly the size of the current browserwindow. </p>
  
  <p>Notice that each <code>article.layer</code> is set to <code>position:relative</code>. </p>
  
  <p>The latest article has two <code>div</code>s in it positioned <code>absolute</code> so one is positioned to the left and one to the right. </p>
  
  <p>This works fine in all browsers, except in Firefox. In Firefox the <code>div.left</code> and <code>div.right</code> of the last article are shown on top and overlay the first article … </p>
  
  <p>Here is a live demo: <a href="http://jsbin.com/ubulot/edit#preview">http://jsbin.com/ubulot/edit#preview</a>
  Test it in Firefox and you see the problem. I have FF 9.0.1 installed on my Mac.</p>
  
  <p>Any idea what I'm doing wrong here?</p>