Trouble with scaling div height

[frozenpeas]

Here is my site:

http://www.frozen-peas.com

I am pretty new to CSS layout but I like it. The problem I am looking to fix right now is this: If you make certain selections in the Portfolio section, you will notice that the drop shadow of the main area does not extend as far down as it should. This is the #right div. The #main div is wrapped around it.

#right{
	position:absolute;
	top:0;
	left:203px;
	width:406px;
	height:100%;
	margin:0 0 0 0;
	padding:0 0 0 0;
	background-image:url(../images/bg_right.gif);
	background-repeat:repeat-y;
}
#main{
	position:absolute;
	width:386px;
	height:253px;
	left:0;
	top:265px;
	margin:0 0 0 0;
	padding:0 7px 5px 7px;
	background-image:url(../images/bg_right.gif);
	background-repeat:repeat-y;
}

	<div id="right">
		<div id="rdmImg">
		  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="[URL unfurl="true"]http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"[/URL] width="400" height="258" align="middle">
			  <param name="allowScriptAccess" value="sameDomain" />
			  <param name="movie" value="../swf/portfolio.swf" />
			  <param name="quality" value="high" />
			  <param name="bgcolor" value="#ffffff" />
			  <embed src="../swf/portfolio.swf" quality="high" bgcolor="#ffffff" width="400" height="258" align="middle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="[URL unfurl="true"]http://www.macromedia.com/go/getflashplayer"[/URL] /></embed>
		  </object>
		</div>
		<div id="main">
			<? if($id){
					do{
					?>
				<p class="center"><img src="<? echo $cat;?>/images/<? echo $row_myQuery2['pic'];?>" border="0" title="<? echo $row_myQuery2['name'];?>" /></p>
				<p><strong><? echo $row_myQuery2['name'];?></strong>
				<? if($row_myQuery2['url']){?>
				 >> <a href="<? echo $row_myQuery2['url'];?>" target="_blank">launch</a></p>
				<? }?>
				<p><? echo $row_myQuery2['description'];?></p>
				<? if($row_myQuery2['samples']){
					eval('$samples = '.$row_myQuery2['samples']);
					foreach($samples as $sample=>$sizes){
						$sampleName = $sample;
						$sampleWidth = $sizes[0];
						$sampleHeight = $sizes[1];
						$sampleText = $sizes[2];
				?>
                <div class="folioSample"><p><a href="javascript:MM_openBrWindow('<? echo $cat;?>/samples/<? echo $sampleName;?>.html','','scrollbars=yes,resizable=yes,width=<? echo $sampleWidth;?>,height=<? echo $sampleHeight;?>')"><img src="<? echo $cat;?>/samples/<? echo $sampleName;?>.jpg" width="85" height="40" border="0" alt="<? echo $sampleText;?>" title="<? echo $sampleText;?>" /></a><br><? echo $sampleText;?></p></div>
				<? 
					}
				}
				}while($row_myQuery2 = mysql_fetch_assoc($myQuery2));
			}else{
			echo "<p>Please make a selection from the left to view some of my work.</p>";
			}?>
			<div id="footer">© frozen-peas.com, <? echo date('Y');?>. | <a href="javascript:;" title="view privacy statement" onclick="MM_openBrWindow('../privacy.html','','scrollbars=yes,resizable=yes,width=500,height=350')">privacy statement</a>&nbsp;</div>
		</div>
	</div>

I know I need to clean this code up a bit. But is there maybe a better way to lay it out?

Thanks for your help.

frozenpeas

 

[Vragabond]

If you set a fixed height to your elements, their height will not adjust to fit content that is larger. Except in IE. Thus, I suggest you remove all fixed heights and (if you want) replace them with min-height. This attribute will work in all the current browsers but IE.