Question

Although some questions similar to this one have been asked before, this one is a little different.

I have a table that looks a little something like this:

<table>
 <tr>
  <td style="height: 100px;">
   <img src="..." style="height: 100px;" />
   <img src="..." style="height: 100px; position: relative; top: -100px;" />
  </td>
 </tr>
</table>

This will overlay the second image on the first one. However, the td insists on being 200px tall even though there is only 100px of content. Setting the td‘s height does nothing, which seems consistent with the answers to the other questions.

However, I do not have the option of embedding the contents in a DIV and setting the height to 100px because the td will still insist on being 200px tall.

How can I tell the td to just be 100px tall?

---

Edit: Oh, and using absolute positioning is out of the question too because a lot of DOM manipulation goes on in the page and stuff gets moved around – whereas the absolutely positioned stuff does not.

---

Edit: jsFiddle example can be found here.

Answer 1

This has nothing to do with the td really, but with the nature of position: relative. A relative element’s space stays reserved in the document flow.

Get rid of the relative, and use position: absolute on the first image instead.

Edit: I just saw your edit. Hmmm. Thinking.

Two workaround ideas come to mind:

• Slap a overflow: hidden on the td

• If that doesn’t work in all browsers or isn’t valid (I’m not 100% sure right now) Put the two images into a <div height='100px;'> and put a overflow: hidden on that.