Expand child over parent add-on

Question

I tried this for a while and I didn't seem to find a solution.
HTML:

<table> <tr> <td> <div>this div has to expand over the td padding</div> </td> </tr> </table> 

CSS

 table { height:100%; } td { height:100%; background: green; padding:5px; } div { min-width:100%; height:100%; background:yellow; float:left; white-space:nowrap; } 

I want the div to expand exactly as much as td, but also expand over the filling of td.

Moving the indentation to the div element is not a solution, since the div must be 100% height and at least 100% width, the rest of the div width is full: hidden and appears on hover, but I'm trying to keep the example as simple as possible, therefore I did not include it here.

Edit:

@codehorse I tried your approach, but now it seems that the div is expanding to the whole body, so I think that Era is right, relative positioning may not work on td. I could use a different shell between td and div, but I would like to avoid this if possible. I am looking for a standard solution.

@Era works great Thanks!

Answer 1

Although this is not the right way to do this, but if it works for you, use this CSS for the div:

  div { margin: -5px; padding: 5px; position: relative; } 

Answer 2

 div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } td { position: relative; } 

Answer 3

If your table structure is not too complicated, I suggest you use display:table to achieve your goal ..... this way you will avoid the position attributes that would otherwise conflict with the layout, sometimes creating a big mess of things.

Also, an html table is not offered these days since you are css tables !!

here is a demo

HTML

 <div class="table"> <div class="td"> <div class="inner">this div has to expand over the td padding</div> </div> </div> 

CSS

 .table { height:100%; display:table; } .td { height:100%; background: green; padding:5px; display:table-cell; } div.inner { min-width:100%; margin:-2px; /* change this to suit your need */ background:yellow; float:left; white-space:nowrap; }