Question

I have two table cells, with dynamic content.

Table cell one works fine, when new content is added to it making it bigger than table cell 2, table cell 2’s height fits table cell 1’s and all is well in the universe.

But when new content is added to table cell 2 (which has overflow hidden, and works fine with display: block) it expands, the overflow never happens, and table cell 1’s height now matches table cell 2.

What I want is when more content is added to table cell 2, it will show content up to table cell 1, then the rest is hidden. I understand I can do it in javascript, any idea how to do it without it?

Here’s a JSFiddle: http://jsfiddle.net/dYsNx/

Col 2 should only go up to col1’s height in content, rest should be overflow hidden

Answer 1

overflow: hidden should not be used in that way.
But, you get the concept.

Others, I saw your code is not very clean and keeping in standard.
So, I would modify it in my way (hope it is better)

Please see the following link:
http://jsfiddle.net/Edditoria/TGfzA/

As you see, overflow: hidden; is in #box, then set position: relative; without top/left setting.

To avoid display:table compatibility issue of IE<7, please just keep the default div display setting in CSS. I would use % rather than fixed px width to avoid IE’s display issues too!

Assuming col1 is the base of dynamic height, there’s nothing to do.

In col2 (and all other columns), you will need to add position: absolute; top: 0px; left: 50%;.

I change the col-x from ID to class, since you may need to add more columns later.

• update: base on your comment, added scrolling instead of hide extra information.