Take the 2-minute tour ×

I currently have:

<div class="generic-block-70">
    <div class="generic-content-70">
        <table id="voteBlock">
            // stuff

However, seeing as the generic-block-70 and generic-content-70 do not have a set height and they expand vertically as text is added, I can't simply set my table's style to height: 100%;.

Is there a way around this?

JSFiddle: http://jsfiddle.net/2vLEL/

share|improve this question
I am a bit confused - you talk about VERTICAL growth, but "width: 100%;" –  Eugen Rieck Dec 29 '11 at 21:11
a way around what? you don't want your table to expand vertically, set a height: XXpx; that will stop it from expanding. Also if you could post the CSS that might help getting you a solution. –  Robert Dec 29 '11 at 21:12
I don't understand how the table is supposed to expand relative to the other content. –  Mathletics Dec 29 '11 at 21:13
My bad, typo. Question edited. –  maxmackie Dec 29 '11 at 21:13
@Robert, if I set a pixel height, then in the event the div contains a small amount of text (such that the height is less than the height I gave my table), the table will surpass the limit of the div. –  maxmackie Dec 29 '11 at 21:14

3 Answers 3

up vote 3 down vote accepted

Set overflow: auto; on your parent div.


.generic-content-70 {
    overflow: auto;
share|improve this answer

I think I probably had a similar problem. This is how I solved it. I have nested tables within tables. Users clicked a button and Javascript created new table rows and cells and filled the cell with data from a form. In order to force the cell to wrap the text and not expand horizontally, I had to use a <div></div> tag inside the cell. In order to force the "table" to NOT expand vertically as new table rows were added, I had to place <div></div> tags below the <td> containing the .

So, the html created from my javascript might look like this.

<table id="root">
 <tr id="A">
  <td id="1" style="width:200px">Content</td>
  <td id="2" style="width:530px">
   <div height="correct_height" overflowY="auto">
    <table id="comments_table" style="width:510px table-layout:fixed">
      <td style="word-wrap:break-word">
       <div style="width:480px;white-space:nowrap">Comments</div>

The first <td id="1"> is created by a function that runs first. The second <td id="2"> is created by a function that runs after and it grabs the height of the <td id="1"> so that the height of the 2nd cell in the row is dependent on the height of the 1st cell in the row. The widths are arranged as such to allow space for the vertical scroll bar to appear.

You have to subtract any padding that you use. For example if two of the elements have style="padding:5px" then that means 5top 5bottom x 2 elements. So:

var correct_height = A.offsetHeight - 20;
share|improve this answer

The code depends on the intention:

  • If you want to lock the table to a height, give it a height: NNpx;
  • If you want to lock the div to a height, give IT a height: NNpx; and an overflow: MM; depending on your needs
share|improve this answer

Your Answer


