Question

I have a table with 3 rows, and a fixed height of 500px.

The first row can vary in height in order to accommodate it’s content, which varies in length.
The third row never changes and always has the same height, which fits its content.
The second row has a bunch of content which will exceed the cell height, and should be hidden after it exceeds the height of the cell. The height of this row should be based purely on how much the first row takes up.

So to be clear on the height:

• Row 1 = x (dynamic)
• Row 3 = y (static)
• Row 2 = 500 – x – y

I have found a way to do this in Firefox, but it does not work in IE 8. For now I am using javascript to fix it after the fact, but it would be nice if this could be done purely with CSS/HTML.

Here is a basic rendition of how I have it working now.

<table cellpadding="0" cellspacing="0" id="table">
    <tr><td id="row1">Row 1 Content</td></tr>
    <tr><td id="row2"><div>Row 2 Content. Lots more content here should not cause the table to expand.</div></td></tr>
    <tr><td id="row3">Row 3 Content</td></tr>
</table>

#table{height:500px;width:200px;} 
#row1,#row3{height:1%} 
/* ^^ force cell heights to fix content */
#row2{position:relative;height:99%} 
/* ^^ a height must be specified to get the absolutely positioned div to assume the cell's height */
#row2 div{position:absolute;height:100%;width:200px;overflow:hidden;top:0;left:0;}
/* ^^ allows content to overflow the cell without causing the cell to expand */

Unfortunately this does not work in IE. IE will take row 2’s 99% height and cause the cell to be as tall as the table’s set width (500px), even though this causes the table to be much larger than 500%. I would leave the height style off the row, but then the div inside it doesn’t know what height to be.

Currently I use jQuery to set the height of the middle row, based on the height of the other cells, but that is not optimal.

Ideas?

Thanks

Answer 1

I solved this by not using 3 rows, but instead 2 rows. The first row being dynamic, the second row taking up the remaining space, but then splitting the additional content off into a div, which is attached to the bottom of the cell. The extra content would just flow under the div.