Height Adjustment Dynamically in CSS and JS

[medo1982]

There may be an answer for this somewhere, but I have pretty limited experience with HTML,CSS, and JS. The answers given that I try don't seem to work properly or I am not entering them in properly so I figured I would just ask. There is a box on the right side of the page (image). When I put in lists that go past a certain point the box doesn't expand to encompass them. It is because they have the height set statically. I've pinpointed where to make the adjustment to both a JS script and CSS sheet. They all need the same height set in order for it to expand properly. I'm looking for a way to expand it either dynamically or a way to be able to set a height for each possible set up. Either through a variable or something similar.Here is the CSS sheet (titled style)\[code\]#content {height:868px;width:740px;float:left;position:relative}#content > ul > li {position:relative;height:868px;width:100%;bottom:0}.box1 {background:url(../images/bg_content.png) repeat;width:100%;height:100%;position:absolute;top:0;left:0}\[/code\]It is the 868px height that needs to be adjusted on both Content sections.Here is the JS script that also needs the same adjustment. (titled pages)\[code\]$('#content').stop().animate({height:'868px'}) if (act!='') { $(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){ $(act).css({display:'none'}); $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){ act=page; }); }) } else { $(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){ act=page; }); }\[/code\]The adjustment on the 868 height to whatever number you change the CSS too makes the proper adjustment. Here is the template I am using if you would like to look specifically at what I am talking about. DownloadorWebsite and the title of the template is Thom Sanders... it is number 8Thanks and I appreciate you taking a look.Merry Christmas