CODEWITHSUNDEEP
htmlcss
Bogdan
Bogdan

Reputation: 1083

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

enter image description here

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.

Upvotes: 6

Views: 8961

Answers (3)

Rob W
Rob W

Reputation: 348992

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

Upvotes: 1

peteorpeter
peteorpeter

Reputation: 4097

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.

Upvotes: 1

Clive
Clive

Reputation: 36956

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

Upvotes: 0

Related Questions