how to make a div inside a td cell overlap the next td

Question

I want to be able to position the div (element E) inside the TD cell (element C) without the other TD cell (element D) getting pushed to the right.

Note: I can't edit anything on that page except for element E.

Answer 1

Since you cannot edit any other element except for element E itself:

Move element E to a container:

<div style="position:relative;">
   <div id="element-E" style="position:absolute;"> ... </div>
</div>

I've added style attributes to the elements, because you alleged to not be able to modify other elements (such as <style>).

position:relative is required to correctly absolutely position a child element.

position:absolute; "tears" the element from its parent, and places it back again, relative to the upper-left corner of the parent (by default, when the position hasn't changed using top for example).

Answer 2

Negative right margin ought to do the trick: margin-right: -50px;.

example: http://jsfiddle.net/peteorpeter/dvr9Z/

Absolute position could work, but adds other complications. Tables + absolute position can be painful, especially with fluid content.