Div with fixed height

Question

I am working on an old code therefore I can not make more structural changes (eg removing the tables), so keep that in mind, please, when answering.

My problem is I have some nested tables and I placed inside a column a div. The div I populate with checkboxes and labels, created dynamically with JavaScript, depending on the result of a query (made with AJAX). The problem is that the DIV is getting larger, to fit the contents, and that is messing up my entire layout.

<table border = "0" width="470px">
  <tr>
    <td height="10px">
      <table>
    <tr>
          <td width="200px">                                    
        <font class="section_font">
          <label id="feedbackLabel">Metadata name:</label>
        </font>
      </td>
      <td align="right" width="170px">
         <font class="section_font">
          <input id="selAllCheckbox" type="checkbox" onclick="doSelectAll()">
              <label id="selAllCheckboxLabel">Select all</label>
         </font>
           </td>
    </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td height="100px">
      <div id="metadata_names" style="overflow:auto; border: 0px solid gray">
      </div>
    </td>
  </tr>
</table>

PS. I have found a workaround for this: after adding the new objects in the div, I resize the DIV again: myDiv.style.height="100px"; Thanks anyway, I will try your solutions also.

PS1. Both solutions work. However, I will use what Umesh suggested because it provides clear isolation from the other things in the page.

Answer 1

Make the height under style properties of div - 100% so it will follow the max height of it's parent ie td in your case. You can also include "overflow:scroll" in case you want the contents to be scrolled horizontally and/or vertically.

Answer 2

Use a div container and assign a class to it. Make sure you populate your date inside this div. Then use CSS to assign a fixed height to it.

HTML:

<div class="container"> 
    <!-- Your data -->
</div>

CSS:

.container{  
    height: 123px;
    overflow: scroll;    
}