min-height: 100%; not working with jQuery treeview Plugin

Question

I have a two-column css layout using Divs that I want to separate with a purple bar.

This link is an example .

Click the "Click Me First Link" on the page. Notice the second bar on the right.

Now click the "Click Me Second" link on the page. Notice the extra bar goes all the way down as it should, but the first bar (e.g. left column, border-right property) does not budge.

Now click the "Expand all" link. Now the left bar goes all the way down and leaves the "second bar" looking shorter.

I would just like one, solid bar going all the way down.

Anyone have any ideas?

Answer 1

Why not use height: '100%' ?

Note the ' tag. And since 100% is the max height you should use height property. since min-height not supported in IE6.

Answer 2

You want the faux-columns technique: http://www.alistapart.com/articles/fauxcolumns/. It seems unintuitive and ahassle, but has been the standard way of achieving this effect for years.

using css display:table http://www.onenaught.com/posts/201/use-css-displaytable-for-layout works as well (in fact, in a more sensible way) but isn't supported across enough browsers yet.