I'm trying to get two divs to line up side by side hoping it will solve my issue. I have two tables of expandable lists. when a section in the first div is selected, the second div moves with the expansion. I've tried setting the second div to position: absolute but that wouldn't allow the section to expand readably. Any help would be appreciated. Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>Yellow Dog Inventory </title>

    <script type="text/javascript" src="script.js"></script>

    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <!--[if IE 6]><link rel="stylesheet" href="style.ie6.css" type="text/css" media="screen" /><![endif]-->
    <!--[if IE 7]><link rel="stylesheet" href="style.ie7.css" type="text/css" media="screen" /><![endif]-->



<style type="text/css">

body{
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
	margin:0px;
	
}

.dhtmlgoodies_question{	/* Styling question */
	/* Start layout CSS */
	color:#FFF;
	font-size:1.1em;
	background-color:#317082;
	width:230px;
	margin-bottom:2px;
	margin-top:2px;
	padding-left:2px;
	background-image:url('images/bg_answer.gif');
	background-repeat:no-repeat;
	background-position:top right;	
	height:20px;
	
	/* End layout CSS */
	
	overflow:hidden;
	cursor:pointer;
}
.dhtmlgoodies_answer{	/* Parent box of slide down content */
	/* Start layout CSS */
	border:1px solid #317082;
	background-color:#E2EBED;
	width:230px;
	
	/* End layout CSS */
	
	visibility:hidden;
	height:0px;
	overflow:hidden;
	position:relative;

}
.dhtmlgoodies_answer_content{	/* Content that is slided down */
	padding:1px;
	font-size:0.9em;	
	position:absolute;
}

</style>
<script type="text/javascript">

var dhtmlgoodies_slideSpeed = 10;	// Higher value = faster
var dhtmlgoodies_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
	if(dhtmlgoodies_slideInProgress)return;
	dhtmlgoodies_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

	objectIdToSlideDown = false;
	
	if(!answerDiv.style.display || answerDiv.style.display=='none'){		
		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){			
			objectIdToSlideDown = numericId;
			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
		}else{
			
			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';
			
			slideContent(numericId,dhtmlgoodies_slideSpeed);
		}
	}else{
		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
		dhtmlgoodies_activeId = false;
	}	
}

function slideContent(inputId,direction)
{
	
	var obj =document.getElementById('dhtmlgoodies_a' + inputId);
	var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
	}else{
		if(height<=1){
			obj.style.display='none'; 
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);				
			}else{
				dhtmlgoodies_slideInProgress = false;
			}
		}else{
			dhtmlgoodies_activeId = inputId;
			dhtmlgoodies_slideInProgress = false;
		}
	}
}



function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='dhtmlgoodies_question'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'dhtmlgoodies_q'+divCounter;
			var answer = divs[no].nextSibling;
			while(answer && answer.tagName!='DIV'){
				answer = answer.nextSibling;
			}
			answer.id = 'dhtmlgoodies_a'+divCounter;	
			contentDiv = answer.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
			contentDiv.className='dhtmlgoodies_answer_content';
			contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
			answer.style.display='none';
			answer.style.height='1px';
			divCounter++;
		}		
	}	
}
window.onload = initShowHideDivs;
</script>
</head>
<body>
<div id="art-page-background-simple-gradient">
    </div>
    <div id="art-main">
        <div class="art-Sheet">
            <div class="art-Sheet-tl"></div>
            <div class="art-Sheet-tr"></div>
            <div class="art-Sheet-bl"></div>
            <div class="art-Sheet-br"></div>
            <div class="art-Sheet-tc"></div>
            <div class="art-Sheet-bc"></div>
            <div class="art-Sheet-cl"></div>
            <div class="art-Sheet-cr"></div>
            <div class="art-Sheet-cc"></div>
            <div class="art-Sheet-body">
                <div class="art-nav">
                	<ul class="art-menu">
                		<li><a href="index.html" class="{ActiveItem}"><span class="l"></span><span 

class="r"></span><span class="t">Home</span></a></li>
                		<li><a href="#"><span class="l"></span><span class="r"></span><span 

class="t">Products</span></a>
                			<ul>
                				<li><a href="ydinventory.html">Yellow Dog Inventory</a></li>
                				
                			</ul>
                		</li>
                		<li><a href="integrations.html"><span class="l"></span><span class="r"></span><span 

class="t">Integrations</span></a></li>
                		<li><a href="support.html"><span class="l"></span><span class="r"></span><span class="t">Help & 

Support</span></a>
                			<ul>
                				<li><a href="faq.html">FAQ</a></li>
                				<li><a href="training.html">Training</a></li>
                				<li><a href="online_support.html">Online Support</a></li>
						<li><a href="http://help.yellowdogsoftware.com/doku.php">Help Center</a></li>
                			</ul>
                		</li>
				<li><a href="press.html"><span class="l"></span><span class="r"></span><span class="t">Press 

Room</span></a><ul>
				  <li><a href="testimonials.html">Testimonials</a></li>
				</li></ul> </li>
                		<li><a href="contact.html"><span class="l"></span><span class="r"></span><span 

class="t">Contact</span></a></li>
                	</ul>
                </div>
                <div class="art-Header">
                    <div class="art-Header-jpeg"></div>
                    <div class="art-Logo">
                        <div id="slogan-text" class="art-Logo-text">Inventory For The Hospitality Industry</div>
                    </div>
                </div>
                <div class="art-contentLayout">
                    <div class="art-content">
                        <div class="art-Post">
                            <div class="art-Post-body">
                        <div class="art-Post-inner">
                            <div class="art-PostMetadataHeader">
                                <h2 class="art-PostHeaderIcon-wrapper">
                                    <span class="art-PostHeader">Yellow Dog Inventory</span>
                                </h2>
                            </div>
                            <div class="art-PostContent">
                                <table>
				<tr>
				<td>
                                <img class="art-article" src="images/Vendor.jpg" alt="Yellow Dog Inventory" width="175px"/>
                                </td>
				<td>
				<img class="art-article" src="images/oi_logo.jpg" alt="Yellow Dog Inventory"/>
				</td>
				<td>
				<img class="art-article" src="images/Checkout_small.jpg" alt="Yellow Dog Inventory"/>
				</td></tr>
				</table>
			<h5>
			Yellow Dog Inventory is a full featured, intuitive retail inventory system able handle the merchandise 

needs of resorts, clubs and general retail 			           operations. Whether you are looking to manage a 

single retail outlet or multiple outlets across one or more properties, 
				   Yellow Dog Inventory offers the flexibility you expect with rock-solid architecture to meet 

the needs of your organization.</h5>
				
                             
 <h4>Yellow Dog Inventory Features:</h4> 
				<div>                              
                                <table class="table" width="100%">
                                	<tr>
                                		<td width="33%" valign="top">
						    

<div class="dhtmlgoodies_question">Physical Inventory </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   <ul class="ulopen"> 
						     <li>Apply physical inventory count changes as of a date/time 
						     <li>Variance shown on screen and report 
						     <li>Select items by level(s)
 						   </ul> 
	</div>
</div>
<div class="dhtmlgoodies_question">Data Collection for Physical Inventories </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   <ul class="ulopen">    
						     <li>Windows CE data collector 
						     <li>Inventory list downloaded to scanner 
						     <li>Different beep tone if scanned item was not found in database. 
						     <li>Manual key in screen when barcode can't be scanned. 
					             <li>Easy to subtract quantities from scanner. 
						     <li>Preview of items scanned 
						     <li>Use multiple scanners to consolidate item counts
 						   </ul> 
	</div>
</div>	
<div class="dhtmlgoodies_question">Order Flows </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   <ul class="ulopen"> 
  
						     <li><b>Requests</b> <br /> Store can submit requests for review and 

approval 
						     <li><b>Purchase Orders</b><br /> Requests can be converted to a PO or you 

can create new orders without a receipt.  Orders                                                              can be created 

based on reorder points and inventory on-hand 
						     <li><b>Receipts</b><br /> Receive inventory with or without a PO 
						     <li><b>Invoice Entry</b><br /> Enter item costs and additional expenses 

(freight, embroidery, etc) 
						     <li>Custom templates for all forms (requests, orders, receipts, invoices) 
					             <li>Automatic order numbering 
						     <li>Add new items on the fly 
						     <li>Print Labels when receiving items
 						   </ul>
	</div>
</div>
	<div class="dhtmlgoodies_question">Transfers </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						  <ul class="ulopen"> 
						     <li>Transfers items from one store to another 
					             <li>Custom templates 
						     <li>Automatic transfer numbering 
						     <li>Add new items on the fly during the transfer process
 						   </ul> 
	</div>
</div>
	<div class="dhtmlgoodies_question">Returns to Vendors </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   
  						   <ul class="ulopen"> 
						     <li>Returns items to vendors 
						     <li>Custom template for returns 
						     <li>Automatic transfer numbering based on Store, Vendor, Incremental, and 

manual input 
						     <li>Custom Templates
 						   </ul>
	</div>	
</div>				
						 
						 
<div class="dhtmlgoodies_question">Bar Code Labels  </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   
  						   <ul class="ulopen"> 
					             <li>Custom labels sizes and information 
						     <li>Ability to print on demand or <i>queue</i> labels 
						     <li>Supports both standard and roll printers 
					             <li>Starting position selection for partial full page labels
    						   </ul>
	</div>	
</div>
		
 </td></tr></table></div>	
<div><table><tr><td>					
<div class="dhtmlgoodies_question">Vendor Management  </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   
  						    <ul class="ulopen"> 
						     <li>Unlimited vendors 
						     <li>Vendor code can be part of SKU number 
						     <li>Fields for account number, vendor tax id, website, terms, and notes 
						     <li>View and edit all items from a vendor 
						     <li>Add news items from vendor screen 
						     <li>Create links to vendor web catalog for each item
 						   </ul> 
	</div>	
</div>		

<div class="dhtmlgoodies_question">Security & Employee Management   </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   <ul class="ulopen">  
						     <li>Unlimited employees 
						     <li>Multiple phone and email fields per employee 
						     <li>Display of employee access rights 
						     <li>Set security by menu and primary functions 
						     <li>Restrict employees to certain store(s)
    						   </ul> 
	</div>	
</div>		
 
<div class="dhtmlgoodies_question">Reporting  </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   <ul class="ulopen">  
						    <li>Standard reports on inventory sales, activity, and status 
						    <li>Export to CSV file or directly to Excel 
						    <li>Display or hide various columns per report 
						    <li>Easily sort and subtotal data
 						   </ul>  
	</div>	
</div>	
						  
<div class="dhtmlgoodies_question">Micros Integration  </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   <ul class="ulopen"> 
						    <li>Automatic assignment of MICROS major groups, family codes, and menu 

classes when creating an item 
					            <li>MICROS interface runs as a service 
						    <li>New items and updates automatically sent every hour with on-demand 

update function as well 
						    <li>Checks to make sure that item info can not conflict with existing 

MICROS item information. 
						    <li>Transactions from POS automatically updated every hour with on-demand 

update function as well 
						    <li>Items can be flagged to not be sent to MICROS 
						    <li>Reporting of any integration item issues
 						   </ul> 
	</div>	
</div>
						
       
<div class="dhtmlgoodies_question">Accounting Integration  </div>
<div class="dhtmlgoodies_answer">
	<div>
		
						   <ul class="ulopen"> 
						    <li>Send daily COGS, item adjustments, and invoices to accounting via 

import files
 						   </ul>
	</div>	
</div>						 
    
<div class="dhtmlgoodies_question"> Technology </div>
<div class="dhtmlgoodies_answer">
	<div>
		<ul class="ulopen"> 
						    <li>Developed using C# and Microsoft .Net 2.0 
						    <li>Database: SQL 2005 (Can use SQL Express free version for most installs)
 						   </ul>
	</div>	
</div>						 
            
  						
    
 
      
  						
    
  
       
 
                                		</td>
                                	</tr>
                                </table>
                                </div>



    
                            </div>
                            <div class="cleared"></div>
                        </div>
                        
                            </div>
                        </div>
                        <div class="art-Post">
                            <div class="art-Post-body">
                        <div class="art-Post-inner">
                            
                            <div class="art-PostContent">
                                                                
                            </div>
                            <div class="cleared"></div>
                        </div>
                        
                            </div>
                        </div>
                    </div>
                    <div class="art-sidebar1">
                        <div class="art-Block">
                            <div class="art-Block-body">
                                <div class="art-BlockHeader">
                                    <div class="art-header-tag-icon">
                                        <div class="t">Receive Our Sales Literature</div>
                                    </div>
                                </div><div class="art-BlockContent">
                                    <div class="art-BlockContent-tl"></div>
                                    <div class="art-BlockContent-tr"></div>
                                    <div class="art-BlockContent-bl"></div>
                                    <div class="art-BlockContent-br"></div>
                                    <div class="art-BlockContent-tc"></div>
                                    <div class="art-BlockContent-bc"></div>
                                    <div class="art-BlockContent-cl"></div>
                                    <div class="art-BlockContent-cr"></div>
                                    <div class="art-BlockContent-cc"></div>
                                    <div class="art-BlockContent-body">
                                        <div>
					<input type="text" value="" name="txtEmail" id="txtEmail" style="width: 95%;" />
                                        <span class="art-button-wrapper">
                                        	<span class="l"> </span>
                                        	<span class="r"> </span>
                                        	<input class="art-button" type="submit" name="search" value="Send" 

onclick="return subscribe_onclick()" />
                                        	
                                	        <script language="javascript" type="text/javascript">
                                	            function subscribe_onclick() {
                                	                var body = "From: " + txtEmail.value;
                                	                var url = 'http://whistle.yellowdogsoftware.com/PushEmail.aspx?

FromEmail=&ToEmail=ptoman&Subject=sales presentation request&Body=' + escape(body) + '&redirect=' + escape

(location.href="http://www.yellowdogsoftware.com/thank_you.html");
                                	                window.open(url, '_self', false);
                                	            }
                                            </script>

                                        </span>
	<p>Enter your email above to receive our sales presenation and video links</p>
                                        </form></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                  </div>      
                <div class="cleared"></div><div class="art-Footer">
                    <div class="art-Footer-inner">
                        
                        <div class="art-Footer-text">
                            <p><a href="#">Contact Us</a> | <a href="#">Terms of Use</a> | <a href="#">Trademarks</a>
                                | <a href="#">Privacy Statement</a><br />
                                Copyright &copy; 2009 ---. All Rights Reserved.</p>
				<table><tr><td>
				 <a href="http://www.facebook.com/pages/Yellow-Dog-Software/106471058357"><img 

src="images/facebook_logo.jpg" width="75px"></a></td>
                                <td><a href="http://twitter.com/YellowDogSW"><img src="images/twitter.jpg" 

width="75px"></a></td>
				<td><a href="http://www.linkedin.com/companies/404083/Yellow+Dog+Software?trk=pp_no_icon"><img 

src="images/linkedin-logo.jpg"                                        width="70px"></a></td>
				</tr></table>	
					
                        </div>
                    </div>
                    <div class="art-Footer-background"></div>
                </div>
            </div>
        </div>
        <div class="cleared"></div>
        
    </div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6453576-2");
pageTracker._trackPageview();
} catch(err) {}</script>    
</body>
</html>

Please post your code where the problem found. We have not enough time to check all of your codes. Thanks

Hi padrict,

Not too sure if I understand your issue. But try this out add the following class to the div below the h4

<h4>Yellow Dog Inventory Features:</h4>
<div class="leftmenu _col">
...
</div>

Here is the CSS

.leftmenu {float:left;position:relative;}

Thanks for the suggestion. Unfortunately it didn't work. I'm still playing with it though. And yes, I probably didn't explain it very well either :)

The code is too long and people will be scared away after seeing this post.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.