O'Reilly

Table Cell and Position Absolute

By on  

If you follow me on Twitter, you saw me rage about trying to make position: absolute work within a TD element or display: table-cell element.  Chrome?  Check.  Internet Explorer?  Check.  Firefox?  Ugh, FML.  I tinkered in the console...and cussed.  I did some researched...and I cussed more.  I found the 13 YEAR OLD ticket in Bugzilla...and threw Molotov cocktails into the street.  Luckily my whining on Twitter solicited an excellent solution from Andrew McGivery (@andrewmcgivery).  Check out the wonky solution that make this work!

The HTML

Here's the sample HTML we'll be using for this exercise:

<table >
	<tr>
		<td>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
		</td>
		<td>
			<div style="position:relative; overflow: auto; height: 100%;">
				<p>Lorem ipsum dolor sit amet.</p>
				<div style="position:absolute; bottom:0; right:0; background: yellow;">
					This will be positioned at 5,5 relative to the cell
				</div>
			</div>
		</td>
	</tr>
</table>

Alternatively you could use DIV elements with display: table-cell:

<div class="table">
	<div class="cell">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
	<div class="cell">
		<div style="position:relative; overflow: auto; height: 100%;">
				<p>Lorem ipsum dolor sit amet.</p>
				<div style="position:absolute; bottom:0; right:0; background: yellow;">
					This will be positioned at 5,5 relative to the cell
				</div>
			</div>
	</div>
</div>

Either of these examples will work.

The CSS

It turns out that pinning height: 100% on the way up the stack cures our absolute positioning blues:

table, tr { height: 100%; }

Here's the craziness with a DIV structure:

.table { display: table; }
.cell { display: table-cell; }
.table, .cell { height: 100%; }

Incredibly odd adding the 100% height to the container, yes?  Well, unfortunately that's what we'll need to do until the bug in Firefox is fixed.

As much as this type of bug annoys the hell out of us, these type of bugs separate the experts and novices.  Well done to Andrew for finding the solution to this heinous problem.  Keep this post handy as you may need it if that Firefox bug lasts another 13 years!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • 5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • Introducing MooTools ScrollSide

    This post is a proof of concept post -- the functionality is yet to be perfected. Picture this: you've found yourself on a website that uses horizontal scrolling instead of vertical scrolling. It's an artistic site so you accept that the site scrolls left to right....

  • jQuery Wookmark

    The first thing that hits you when you visit Pinterest is "Whoa, the columns are the same width and the photos are cut to fit just the way they should."  Basic web users probably think nothing of it but as a developer, I can appreciate the...

Discussion

  1. A handy tip, but I’m curious as to why you would need to absolutely position within a table cell?

  2. MaxArt

    I’ve known that bug for *ages*… technologically speaking. It’s a shame for the Mozilla guys, if you ask me.
    The workaround is just a trick and doesn’t work in all the cases.
    I resolved to not use tables, or not use absolutely positioned elements inside it.

  3. SelenIT

    The Bugzilla ticket mentioned in the article is about relative positioning the table cell itself. Having this not fixed for 13 years could be excused because CSS2.1 spec says that ‘The effect of ‘position:relative’ on … table-cell, and table-caption elements is undefined.’ The problem here is that table cells with `position: relative` are not containing blocks for their absolutely positioned contents. It has its own Bugzilla ticket (https://bugzilla.mozilla.org/show_bug.cgi?id=63895), which also is 13 years old, but has no excuse in the spec. Please help make its priority higher with your votes!

  4. Hey, David have you checked it in ie is not working am using windows 8

  5. Nandan Kr Sahoo

    Hi,
    Thanks for created of Table Cell and Position Absolute.
    but it is not working IE Browser. can you please give me solution for IE browser.

    Thanks
    Nandan

  6. Blake

    I was just dealing with this issue last week :) There are 3 boxes laid out side by side that need to be the same height and have a button inside each box that is positioned absolutely to the bottom left.
    Here’s an example of just 1 box: http://codepen.io/rblakejohnson/pen/IfDyb

    And I’ve commented out the height:100% CSS and it seems to be working in Firefox!? But I remember messing with different ways of doing this last week and it not working in Firefox.
    Anyway, I wondered if you could shed some light on this and the extra div you have in your demo that has inline styles. It doesn’t seem to match up with the code examples you have in this article that only make it seem like your don’t need an extra div. Is the extra div necessary?

  7. Hello David,

    I’ve been ranting on this bug for quite some time as well :). I’ve tried to think inside the (flex)box for this one and created a flextable (for the lack of a better name :p). I now use flexbox, with css tables as fallback, only when the browser doesn’t support the new syntax (2013 = “display: flex”).

    This doesn’t require any additional html at all, which was one of my requirements as well.

    My code sample: http://codepen.io/kevinsmets/pen/AmDzh

    More info (forum post on css-tricks) here: http://css-tricks.com/forums/topic/flextable-flexbox-with-css-tables-fallback/

  8. mem

    I believe it doesn’t work when using images that need to shrink or grow, using max-width:

    cf. http://jsfiddle.net/u7knh/25/

  9. Carlos

    Great been looking for a solution for a while, this is the only one that worked for me. Thanks for sharing

  10. mast

    This solution doesn’t work and there’s actually a much simpler way:

    http://stackoverflow.com/questions/25223757/vertically-align-div-with-absolute-position/25228012#25228012

  11. Man, this was a great help. I found I had to add height="100%" to the table tag as well but this helped me solve a really complex layout. Thanks!

  12. Bill

    Hi David,

    Don’t cry, but your demo doesn’t work at all in Internet Explorer 11 (or any other version). Moo-hoo-hahaha!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...