fellow coders,i've got this style sheet problem i've been fumbling with for awhile, and although it shouldn't be hard...no one can
answer it for me yet...now i've attached the code for the page and the style sheet as well. as you can see i've nested the div tags
so the events and officers box will slide down as the description gets dynamically bigger (or up if smaller). this works fine.
however, when the events box gets dynamically bigger or smaller, the officer box won't stay put vertically. it slides up and down as
the events box changes sides.thanks for your time all who try!bjust change the .cs extension to a .cfm and you should be ready to
roll.



~~~~~~~~~~~~~~~~~~ 

Morning Star Technologies





Dynamic Web Development & Design 



-web/database applications 



-programming 



-web graphics 





bryan@m...

www.morningstartechnologies.com 



~~~~~~~~~~~~~~~~~~



Chat with friends online, try MSN Messenger: Click Here

sorry the file didn't attach...here's the code:

<STYLE type="text/css">
/*common tags*/
TD.left
{text-align: left;}
TD.center
{text-align: center;}
TD.right
{text-align: right;}

A:link {background: none; color: #003300; text-decoration: none;}
A:active {background: none; color: #003300; text-decoration: none;}
A:visited {background: none; color: #003300; text-decoration: none;}
A:hover {background: none; color: #66CC00; text-decoration: none;}

TABLE.collapse
{border-collapse: collapse;
 cellspacing: 0;
 bordercolor: #111111;}
TABLE.shortBoxOne
{width: 300px;
 border: solid thin #CC0000;
 cellspacing: 0;
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 13px;}
TABLE.longBoxOne
{width: 635px;
 border: none;
 cellspacing: 0;
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 13px;}
TABLE.longBoxTwo
{width: 635px;
 border: solid thin #CC0000;
 cellspacing: 0;
 font-family: Arial, Helvetica, sans-serif; 
 font-size: 13px;}
 
/* unique creatures */
.boldRed
{color: #CC0000;
 font-weight: bold;}
 
/* layer classes */
.descriptionContainer
 {position: absolute; 
 top: 255px; 
 left: 155px;}  
.eventStateContainer
{position: relative; 
 top: 20px; 
 left: 0px;}
.officerContainer
{position: relative; 
 top: -346px; 
 left: 328px;}
.tournamentContainer
{position: relative; 
 top: -184px; 
 left: 0px;}

/*not used yet*/
.newsContainer
{position: absolute; 
 top: 255px; 
 left: 155px;}
.announcementContainer
{position: absolute; 
 top: 255px; 
 left: 483px;}
.eventContainer
{position: absolute; 
 top: 717px; 
 left: 155px;}
</style>

<div class="descriptionContainer">
<table class="longBoxOne" cellpadding="8">
  <tr> 
    <td valign="top">
      <cfoutput>#qrySelectDescription.Description#</cfoutput>
    </td>
  </tr>
</table>
<!--nesting of container classes used so the events and officer tables 
slide down upon expansion of the description.-->
	<div class="eventStateContainer">
	<table class="shortBoxOne" cellpadding="8">
	  <tr> 
	    <td valign="top"><img src="images/Chapter_Events.gif" 
width="270" height="40"></td>
		</tr>
		<cfif (qryCommunity.recordcount IS 0) AND 
(qrySocial.recordcount IS 0) AND (qryOther.recordcount IS 0)>
		<tr>
			<td>We're sorry, but there are no State Events at 
this time.  Please check back soon.</td>
		</tr>
		<cfelse>
			<cfif qryCommunity.recordcount IS NOT 0>
			<tr>
		    <td><div class="boldRed">Community Events</div></td>
			</tr>
			<cfoutput query="qryCommunity">
			<tr>
				<td>#Name#&nbsp;&nbsp;-
&nbsp;#Description#</td>
			</tr>
			</cfoutput>
			</cfif>
			<cfif qrySocial.recordcount IS NOT 0>
			<tr>
		    <td><div class="boldRed">Social Events</div></td>
			</tr>
			<cfoutput query="qrySocial">
			<tr>
				<td>#Name#&nbsp;&nbsp;-
&nbsp;#Description#</td>
			</tr>
			</cfoutput>
			</cfif>
			<cfif qryOther.recordcount IS NOT 0>
			<tr>
		    <td><div class="boldRed">Other Events</div></td>
			</tr>
			<cfoutput query="qryOther">
			<tr>
				<td>#Name#&nbsp;&nbsp;-
&nbsp;#Description#</td>
			</tr>
			</cfoutput>
			</cfif>
		</cfif>
	</table>
	</div>
	
	<div class="officerContainer">
	<table class="shortBoxOne" cellpadding="8">
	  <tr> 
	    <td valign="top"><img src="images/Chapter_Officers.gif" 
width="270" height="40"></td>
		</tr>
		<cfoutput query="qryOfficer">
		<tr>
		  <td>
	    <div class="boldRed">#FullName#</div>
		  #Organization#<br>
		  #Title#<br>
		  #Email#
		  </td>
		</tr>
		</cfoutput>
	</table>
	</div>

</div>

</body>
</html>