Div auto size are not matching

Question

I have to div tags that are right next to one another. I need one to be set to auto size so it can grow and shrink with the results of the search. The one to the left of it, the navigation, is set at a min height of 600px. That works great until the search exceeds 600px and grows. The user is left with a gap due to the navigation height being set to a strict 600px. I need a way to "connect" both of these div tags so when one grows the other does as well, with a min set at like 600px. Thanks for your help! Also, as a side note... in google Chrome I get white space after the search.... and not just a little... like 600px worth .. im not too worried about it since it is only in Chrome, but if anyone has any thoughts on that, that would be great! Thanks!
website can be found at:
http://web.ics.purdue.edu/~smith50/vcs/home.html
CSS code for both DIV tags:
#searchcontent {
float: left;
width: 820px;
background-color: #FFF;
padding-left: 15px;
padding-right: 15px;
min-height:600px;
height:auto !important; height:600px;
#nav {
float: left;
width: 150px;
padding-top: 0px;
padding-left: 0px;
background-color: #EEE;
min-height:600px;
height:auto !important; height:600px;

Answer 1

Divs don't really work like table columns. What I would do is use a technique called "faux columns". Basically you have a container div with a background image that makes it look like there's two columns. This background image can be pretty short - 800px wide (or whatever desired width) by at least two pixels tall as some versions of IE have issues with 1-pixel high images. You then repeat this image down the y axis using the CSS background-repeat. Your sidebar and serach divs will fit inside the container div. As the content expands in height, the divs inside the container div will expand vertically and everything will be hunky-dory.