Getting position:absolute inside display:table-cell to display properly in Firefox

By Geoff Muskett

For the most part, the only reason I ever use display:table, and display:table-cell on the child is for vertical alignment. It’s pretty convenient, but does throw up some unexpected behaviour.

Positioning something absolutely inside a relatively positioned element is a pretty standard thing, normally. In my case today it was a little pointer triangle which I wanted on the outer edge of the div and centred. I thought this would work:

<div class="parent">
<div class="child">
Some content in child
<div class="triangle"></div>
</div>
</div>
.parent {
display:table;
...stuff...
}
.child {
display:table-cell;
position:relative;
...stuff...
}
.triangle {
position:absolute;
...stuff...
}

And it does. On Chrome and Safari (not sure about IE). Firefox doesn’t like it though. It doesn’t recognise the relative positioning of the child element.

The work around is pretty simple, but like most things if you don’t know then it takes a little bit of figuring out.

Just put a relatively positioned div inside the child, and display:block it. Like this:

<div class="parent">
<div class="child">
<div class="positionMeRelative">
Some content in child
<div class="triangle"></div>
</div>
</div>
</div>
.parent {
display:table;
...stuff...
}
.child {
display:table-cell;
...stuff...
}
.positionMeRelative {
display:block;
position:relative;
...stuff...
}
.triangle {
position:absolute;
...stuff...
}

Comments

Leave a Reply

Your email address will not be published.

Join my newsletter

If you’re looking for insights into web design and development, and crafting a successful presence online, then you should join the smart folk on on my newsletter. I discuss my thoughts on an issue relating to the web, then provide and teach effective solutions.