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

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 an开发者_JAVA技巧ything on that page except for element E.

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.

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).

Assuming the height of the <div> is 100px and the combined width of the two <td> cells is 500px try:

td.element-e-container { 
  position:relative; 
  height:100px; 
}
#element-e{
  position:absolute;
  width:500px;
  height:100px;
}

Then give the td containing element e a class of element-e-container and the element itself an ID of element-e