Position relative on td table element ?

→ Are you a new visitor? Please visit the page guidance for new visitors ←

Position relative on td table element ?

Back in the past when tables were fashionable when building websites, I had some problems with the following thing. I wanted to place a span in absolute position within a “<td>” that had position:relative. Everything was clear in my mind back then, you know…I give relative position to the parent and absolute to the child and should work as expected. Yes, but this wasn’t enough. Why ? Let’s see the situation and the solution for all modern browsers.

I had the following code:

This does not work at all. Why ? Because for some reason, the “position:relative” command isn’t being read on the TD and the notice DIV is being placed outside of the content container at the bottom of my page.

Here comes the solution

A workaround would be if you do a “display: block;” on the td, destroying the td identity, but hey, that is not what you want!

Because according to CSS 2.1, the effect of position relative on td table elements is undefined, this wouldn’t work. Illustrative of this, position: relative has the desired effect on Chrome 13, but not on Firefox 4. Your solution here is to add a div around your content and put the position: relative on that div instead of the td.

 

Lets see in the below picture, what I am talking about.

relative position on td

For further reading check this helpful links about the involved things in this articles:
Position property in css.

HTML “td” tag.

Until next time we meet, happy coding 🙂

Request an article ←