Div position issue in Firefox

Question

I am working on this code and this code working fine in Chrome but not in Firefox

Here is code

<html lang="en-US">
<body><table style="width: 100%;">
<tbody><tr>
<td style="position: relative; width: 50%; height: 500px; vertical-align: top; overflow: hidden;">
<div style="position: absolute; background-color: blue; height: 100%; width: 100%;"></div></td>
<td style="position: relative; width: 50%; height: 500px;"></td>
</tr>
</tbody></table>
</body>
</html>

If you want to see here is JSFiddle for code in working

Please explain me why div in Firefox covering whole width of the screen, it should cover only 50% width as Chrome is showing.

Is this a real-world use case, or is this a puzzle? These are some very odd things to want to do. — 000, Jun 10 '13 at 20:06

Adrift · Answer 1 · 2013-06-10T20:20:14.970

Possibly because as of the 2.1 Specification relative positioning on table-cell elements is undefined by CSS:

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its normal position. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

This is not true as of the Positioned Layout Module (They explicitly define the behaviour) but it hasn't been adopted by vendors yet.

score 1 · Answer 2 · edited May 23 '17 at 11:43

The problem is the position: absolute; of the inner DIV:

<html lang="en-US">
  <body>
    <table style="width: 100%;">
      <tbody>
        <tr>
          <td style="position: relative; width: 50%; height: 500px; vertical-align: top; overflow: hidden;">
            <div style="background-color: blue; height: 100%; width: 100%;"></div>
          </td>
          <td style="position: relative; width: 50%; height: 500px;">
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

You can test this with an update I made to your jsfiddle.

If you really need to use an absolute positioned div inside a cell, then you should put inside that cell a relative positioned div that contains the absolute one:

<td>
  <div style="position: relative; ... ">
    <div style="position: absolute;... ">
      ...
    </div>
  </div>
</td>

This another update to the original jsfiddle shows an absolute div inside the relative one, with an offset of 30 from the left and 10 from the top.

This old thread here in stackoverflow may be useful: Using Position Relative/Absolute within a TD?

Corrected the second jsfiddle uri. – Nicolás Ozimica Jun 10 '13 at 20:40 — Nicolás Ozimica, Jun 10 '13 at 20:40

Div position issue in Firefox

2 Answers2