CODEWITHSUNDEEP
htmlcssfirefox
Goozak
Goozak

Reputation: 529

Contain absolutely positioned 100% width DIV inside a TD in Firefox

I found several questions addressing similar problems, but each solution has a particularity that prevents it from applying to this situation...

My issue is that I want an absolutely positioned, 100% width, div inside a table cell. I can't use fixed widths or heights anywhere because all the content can vary in width and height. I want the div to be positioned from the bottom of the cell height, which is influenced by the (variable) height of the content in the next cell.

The code below works fine in IE8 (yeah, still have to support it...), IE11 and Chrome — the red div stays contained within the left table cell. In Firefox however, the div is actually sized according to the width of the TABLE, covering part of the cell on the right.

What can I do to make it work in Firefox?

Demo: http://jsfiddle.net/AGYGH/

HTML:

<table id="OuterTable" border="1">
    <tr>
        <td id="TableCell">
            <table id="InnerTable" border="1">
                <tr>
                    <td>Dummy text of varying length</td>
                    <td>Dummy</td>
                </tr>
            </table>
            <div id="AbsoluteDiv">
                <div id="InnerDivLeft">Left Div</div>
                <div id="InnerDivRight">Right Div</div>
            </div>
        </td>
        <td>
            <select multiple="multiple" size="10">
                <option>Varying length options</option>
            </select>
        </td>
    </tr>
</table>

CSS:

#OuterTable {
    position:relative;
}
#TableCell {
    vertical-align:top;
    position:relative;
}
#AbsoluteDiv {
    background-color:red;
    position:absolute;
    width:100%;
    bottom:30px;
}
#InnerDivLeft {
    float:left;
}
#InnerDivRight {
    float:right;
}

Upvotes: 1

Views: 1110

Answers (2)

Goozak
Goozak

Reputation: 529

Thanks to Seth for pointing me to the JavaScript solution, which has the added benefit of also fixing small padding/margin issues on IE in my 'real world' usage.

So, I've wrapped the entire content of <td id="TableCell"> with a <div class="wrapper"> (as suggested by Hashem) and used jQuery to size its height to the actual height of the table cell:

$('#TableCell div.wrapper').height($('#TableCell').height());

Revised Demo (with the added wrapper colored blue) : http://jsfiddle.net/AGYGH/9/

Upvotes: 0

Seth
Seth

Reputation: 490

I've ran into this problem as well. According to the spec, table cells cannot be positioned. Meaning FireFox is doing it right, and everyone else is doing it "right".

Kinda hacky, but you could always use div's with "display: table-cell" THEN position them relative.

This article has a good JS alternative for the issue.

Upvotes: 1

Related Questions