title: Fixed height div inside a table cell without extending the height of the cell
body: <p>I have a table where the cells have a fixed height. Within the table I have a div which has a fixed height as well, and if that height exceeds the cell height, I would like it to overflow out of the cell, without the cell height extending (not a layout I would normally want to build, but it is a given start point at the moment).</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div&gt;
                  12345
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  
  table
  {
       width: 90%;
       margin: 10px;   
  }
  
  td
  {
      width: 50%;   
      border: 1px solid blue;
      padding: 5px;
      height: 100px;
      vertical-align: top;
  }
  
  div
  {
      height: 250px;
      width: 75%; 
      border: 1px solid red;
  }
  </code></pre>
  
  <p>This resulted the table cell height to extend according to the div height.</p>
  
  <p>I tried adding <code>position: absolute</code> to the div, and <code>position: absolute</code> to the td, and that did the trick in Chrome and IE (see this <a href="http://jsfiddle.net/JU9tn/3/" rel="nofollow noreferrer">jsFiddle example</a>):</p>
  
  <p><img src="https://i.stack.imgur.com/c5KP8.png" alt=""></p>
  
  <p>However, in Firefox the <code>position: absolute</code> caused the width of the div to relate to the window width instead of the cell width:</p>
  
  <p><img src="https://i.stack.imgur.com/BwEC3.png" alt=""></p>
  
  <p>How can this be fixed? I'm looking for either a solution other than the <code>position: absolute</code>, or a way to get the div width right in FF.</p>