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 © 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>
