window size - div inside td elements - scrollbars

Question

I have following html

<table>
    <tr>
        <td class='tclone' id='clone'></td>
         <td class='loader' id='loader'>
              <div id='tdiv' style="height:630px; width:835px; overflow:auto;"></div>
         </td>
    </tr>
</table>

I open this HTML in a new window and JavaScript append contents to tclone and tdiv. tdiv specifically loads a image. I needed to give the width and height parameters to div as it was overflowing past the window, also overflow parameter allows scroll-bar inside td. This solution works with fixed size window - but I want a mechanism, such that when user resizes the window the div also gets expanded and the div scroll-bars are also adjusted to match the new window size.

any suggestions?

Answer 1

You need to specify the width and height in percentage then:

<div id='tdiv' style="height:30%; width:30%; overflow:auto;"></div>

You should adjust the percent values though.

Answer 2

On the table set "table-layout: fixed". Make sure the table and td widths are % based. You shouldn't need a width on the div.

If the content that overflows the div is not contained in another tag, you'll need a wrapper around tdiv.

An alternative to % widths would be setting the min-width and/or max-width attributes.