Home/ Questions/Q 100773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T00:38:36+00:00

How can i make the inner table to overlap the parent div with 5

  • 0

How can i make the inner table to overlap the parent div with 5 px while resizing?

my current solution:

<div id='crop'>   <table style='width:105%; height:105%;'>     //table cells   </table> </div>

problem is that it gets smaller when resizing…

how can I make it constantly overlap with 5px;

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. The folling seems to work nicely in FF3, Chrome and IE7. Though using expressions in CSS styles for IE is not ideal.

    You should see that when rendered, the blue ‘outer’ div is displayed within the ‘inner’ div. The ‘inner’ div will be red for browsers other than IE where it will be green instead.

    Also note, in this example I had to subtract 2px from the height of the ‘inner’ div to adjust for the top and bottom borders.

    <html>     <head>         <style type='text/css'>             #outer {                 position: relative;                 border: solid 1px blue;                 height: 100px;             }             #inner {                 position: absolute;                 border: solid 1px red;                 top: -5px;                 left: -5px;                 bottom: -5px;                 right: -5px;             }         </style>         <!--[if IE]>         <style type='text/css'>             #inner {                 border: solid 1px green;                 height: 108px;                 width: expression(document.getElementById('outer').clientWidth + 10);             }         </style>         <![endif]-->     </head>     <body>         <table width='100%'>             <colgroup>                 <col />                 <col width='100' />                 <col width='200' />             </colgroup>             <tr>                 <td>                     <div id='outer'>                         <div id='inner'>                             <table border='1'>                                 <tr><td>A</td><td>B</td></tr>                                 <tr><td>C</td><td>D</td></tr>                             </table>                         </div>                     </div>                 </td>                 <td>Alpha</td>                 <td>Beta</td>             </tr>             <tr>                 <td>One</td>                 <td>Two</td>                 <td>Three</td>             </tr>         </table>     </body> </html>
    • 0