html - Auto expand outer table to prevent overlay due to position: absolute -

this continuation of posted question: center table , align right div. on previous question, j08691 provided perfect solution center table , right align div. i've encontered problem pagediv , pagelinks elements overlay each other if put them in outer table. see example: http://jsfiddle.net/hockchailim/uecfg/4/. there way auto expand outer table prevent such overlay?

<table id="outertable" border="1"> <tbody>     <tr>         <td>             <div id="pagingdiv" style="width:100%;">                 <div id="gotopage" style="float:right">&nbsp; page 3 of 42 | page#:                     <input style="height:14px;width:21px;" /> <a href="#go">go</a>                  </div>                 <table id="pagelinks" style="margin:auto;">                     <tbody>                         <tr>                             <td> <a href="#first" title="click go first page.">1</a>                             </td>                             <td> <a href="#first" title="click go second page.">2</a>                             </td>                             <td> <a href="#first" title="click go second page.">3</a>                             </td>                             <td> <a href="#first" title="click go second page.">4</a>                             </td>                             <td> <a href="#first" title="click go second page.">5</a>                             </td>                         </tr>                     </tbody>                 </table>             </div>         </td>     </tr>     <tr>         <td>             short,  <br/>              caused gotopage , pagelinks <br/>             on previous cell overlaying each other         </td>     </tr>     </tbody>                 </table>       

is you're after? removed positioning div's

#pagingdiv {  } #gotopage {      right:0; } 

http://jsfiddle.net/uecfg/6/