Originally posted by Tom Joiner:
I am trying to create a style sheet which has two div's side by side. The problem is, I want them to match in height, and the main div on the right can be of any height.
Here are the two divs. As you can see, here I am setting the left div to be 100% in height.. however, it does not grow with content-main. Content-main is a table which can have anywhere from 3 to 30 entries in it.
How should I approach this so the two div's are always matched in height, yet variable in height?
I wish for content main to be a minimum height of 1
Unfortunately, I don't think that it is possible to use CSS to force one div's height to depend on the height of the div next to it. The best thing I could come up with was to put them both inside another div, set the content-left div's height to 100% and hope that the outer div's size would be driven by the table in the content-main div. Unfortunately, it looks like the content-left div forces the outer div's height to also be 100%. It might be possible to do it along those lines, but I wasn't able to figure out the right combination to make it work
The best alternative I can think of would be to use Javascript that updates the height of the content-left div with the height of the content-main div whenever the content-main div is resized... though if there's a better alternative, I'd like to know about it too!