Question

i’m experiencing the weirdest positioning problem that appears only in firefox.

My HTML:

<article id="one" class="layer"></article>
<article id="two" class="layer"></article>
<article id="three" class="layer">
   <div class="left"></div>
   <div class="right"></div>
</article>

My CSS:

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; }

So each article is set to display:table 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.

Notice that each article.layer is set to position:relative.

The latest article has two divs in it positioned absolute so one is positioned to the left and one to the right.

This works fine in all browsers, except in Firefox. In Firefox the div.left and div.right of the last article are shown on top and overlay the first article …

Here is a live demo: http://jsbin.com/ubulot/edit#preview
Test it in Firefox and you see the problem. I have FF 9.0.1 installed on my Mac.

Any idea what I’m doing wrong here?

Answer 1

If you change display:table to display:block throughout, it renders fine as you can see here. Is there a reason you’re using display:table?