Question

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).

For example:

<table>
    <tr>
        <td>
            <div>
                12345
            </div>
        </td>
        <td></td>
    </tr>
</table>

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

This resulted the table cell height to extend according to the div height.

I tried adding position: absolute to the div, and position: absolute to the td, and that did the trick in Chrome and IE (see this jsFiddle example):

However, in Firefox the position: absolute caused the width of the div to relate to the window width instead of the cell width:

How can this be fixed? I’m looking for either a solution other than the position: absolute, or a way to get the div width right in FF.

Answer 1

You can achieve what you need using an extra div inside the table cell:

CSS:

table
{
     width: 90%;
     margin: 10px;   
}

tr
{
    height: 100px;
}
td
{
    width: 50%;   
    border: 1px solid blue;
    padding: 5px;
    height: 100px;
    vertical-align: top;
    position: relative;
}

div.outer {
    height:100px;
    max-height: 100px;
    overflow: visible;
    width: 100%;
}

div.inner
{
  height: 250px;
  width: 75%;
    border: 1px solid red;
}

HTML:

<table>
    <tr>
        <td>
            <div class="outer">
                <div class="inner">
                    12345
                </div>
            </div>
        </td>
        <td></td>
    </tr>
</table>

I forked your jsfiddle to demonstrate: http://jsfiddle.net/dyes5/1/