Firefox, display:table-cell and absolute positioning

If you have reached this page, you are probably trying to put a position:absolute element in a display:table-cell; position:relative element. This shouldn’t be a problem with Chrome and Internet Explorer, but Firefox will probably ignore position:relative on your display:table-cell element, placing your absolutely positioned element wherever it pleases.

You probably have something like this:

<div style="display:table-cell; position:relative">
    <div style="position:absolute; width:100%; height:100%">...</div>
</div>

Since Firefox doesn’t support a combination of display:table-cell and position:relative, simply wrap the content in a div:

<div style="display:table-cell">
    <div style="position:relative">
        <div style="position:absolute; width:100%; height:100%">...</div>
    </div>
</div>

That’s all you need to get it to work properly!

13 comments on “Firefox, display:table-cell and absolute positioning

  1. I wish this would solve my problem, but if you want to use the absolute positionning to set a bottom attribute this simply doesn’t work :/

  2. Firstly, you need to put the width:100%; height:100% on the outer div, otherwise it will shrink to nothing (as it has no statically positioned content), and you’ll only see an empty table cell.

    Secondly, this only works if your table cell has a fixed width and height. If (as is often the case) the table cell is supposed to size itself according to content, then it will have no fixed width or height and width:100%; height:100% will just act like width:auto; height:auto. In this case, with only absolutely positioned content, once again your outer div will shrink to height zero.

  3. Actually the width:100% is redundant; give the outer div zero margins and width:auto (the default anyway), and it’ll fill the horizontal space of the table cell (regardless whether it’s fixed-width or not). Only the vertical dimension presents a problem!

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax