X-Cart forums - Details box and Options box inline with eachother

HI all...I hated the fact that the Product details and options were on top of eachother - it was wasted space to me. I thought I'd post what my solution was that seems to work pretty well for me. You can check it out for an example here: http://sustainableseedco.com/Golden-Self-Blanching-Celery-Seed.html
Code:




<table width="100%" border="0">

  <tr>

    <td width="50%" valign="top">



  <table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}">



    <tr>

      <td colspan="3" class="product-subtitle">

        <div>{$lng.lbl_details}</div>

      </td>

    </tr>



    <tr>

      <td class="property-name">{$lng.lbl_sku}</td>

      <td class="property-value" id="product_code" colspan="2">{$product.productcode|escape}</td>

    </tr>



    {if $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products ne "Y" and $product.distribution eq ""}

      <tr>

        <td class="property-name">{$lng.lbl_in_stock}</td>

        <td class="property-value product-quantity-text" colspan="2">

          {if $product.avail gt 0}

            {$lng.txt_items_available|substitute:"items":$product.avail}

          {else}

            {$lng.lbl_no_items_available}

          {/if}

        </td>

      </tr>

    {/if}



    {if $product.weight ne "0.00" or $variants ne ''}

      <tr id="product_weight_box"{if $product.weight eq '0.00'} style="display: none;"{/if}>

        <td class="property-name">{$lng.lbl_weight}</td>

        <td class="property-value" colspan="2">

          <span id="product_weight">{$product.weight|formatprice}</span> {$config.General.weight_symbol}

        </td>

      </tr>

    {/if}



    {if $active_modules.Extra_Fields}

      {include file="modules/Extra_Fields/product.tpl"}

    {/if}



    {if $active_modules.Feature_Comparison}

      {include file="modules/Feature_Comparison/product.tpl"}

    {/if}



    {if $active_modules.Subscriptions and $subscription}

      {include file="modules/Subscriptions/subscription_info.tpl"}

    {else}



      <tr class="separator">

        <td colspan="3">&nbsp;</td>

      </tr>



      {if $product.appearance.has_market_price and $product.appearance.market_price_discount gt 0}

        <tr>

          <td class="property-name product-taxed-price">{$lng.lbl_market_price}:</td>

          <td class="property-value product-taxed-price" colspan="2">{include file="currency.tpl" value=$product.list_price}</td>

        </tr>

      {/if}



      <tr>

        <td class="property-name product-price" valign="top">{$lng.lbl_our_price}:</td>

        <td class="property-value" valign="top" colspan="2">

        {if $product.taxed_price ne 0 or $variant_price_no_empty}

          <span class="product-price-value">{include file="currency.tpl" value=$product.taxed_price tag_id="product_price"}</span>

          <span class="product-market-price">{include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.taxed_price tag_id="product_alt_price"}</span>

          {if $product.taxes}

            <br />{include file="customer/main/taxed_price.tpl" taxes=$product.taxes}

          {/if}



        {else}

          <input type="text" size="7" name="price" />

        {/if}

        </td>

      </tr>

      {if $product.forsale ne "B"}

        <tr>

          <td colspan="3">{include file="customer/main/product_prices.tpl"}</td>

        </tr>

      {/if}

    {/if}

</table>





</td>





<td width="50%" valign="top">

<table cellspacing="0" class="product-properties" summary="{$lng.lbl_description|escape}">



    <tr>

      <td colspan="3" class="product-subtitle">

        <div>{$lng.lbl_options}</div>

      </td>

    </tr>



<tr>

<td colspan="2">

{* Determine if product has variants *}

{if $variants}

    <table class=inlineSpec width="100%">



    {* Build table header *}

    <tr class="specHeader">



    {* Loop to handle multiple variant names *}

    {foreach from=$product_options item=v}

        {if $v.is_modifier eq ''}<TD>{if $usertype eq "A"}{$v.class}{else}{$v.classtext|default:$v.class}{/if}</TD>{/if}

    {/foreach}

       <td >{$lng.lbl_price}</td>

    </tr>



    {* Build table rows *}





    {foreach item=variant from=$variants}

        {assign var=exception value="0"}



        {foreach key=ExceptionKey item=exceptionList from=$product_options_ex}

            {assign var=found value=0}

            {assign var=total value=0}

            {foreach item=classException from=$exceptionList}

                {math assign=total equation="x + 1" x=$total}

                {foreach name=l1 item=variantOpt from=$variant.options}

                    {if $variantOpt.optionid eq $classException.optionid}{math assign=found equation="x + 1" x=$found}{/if}

                {/foreach}

            {/foreach}

            {if $found eq $total}{assign var=exception value="1"}{/if}



        {/foreach}

        {if $exception ne "1"}



            <tr class="specItemHeader{cycle values="1,2"}">

            {* Loop to handle multiple variants *}

            {foreach name=foo item=variantOpt key=key from=$product_options}

                {if $variantOpt.is_modifier eq ''}

                    <TD>

                    {foreach name=bar item=varOpt from=$variant.options}

                        {if $varOpt.classid == $variantOpt.classid}{$varOpt.option_name}{/if}

                    {/foreach}

                    </TD>

                {/if}



            {/foreach}



                <td>{include file="currency.tpl" value=$variant.price}</td>

            </tr>

        {/if}

    {/foreach}

    </table>

{/if}



{* END: Determine if product has variants *}



</td>

</tr>



    {if $product.forsale neq "B" or ($product.forsale eq "B" and $smarty.get.pconf ne "" and $active_modules.Product_Configurator)}



      {if $active_modules.Product_Options ne ""}

        {include file="modules/Product_Options/customer_options.tpl" disable=$lock_options}

      {/if}



      <tr class="quantity-row">



        {if $product.appearance.empty_stock and ($variants eq '' or ($variants ne '' and $product.avail le 0))}



          <td class="property-name product-input">{$lng.lbl_quantity}</td>

          <td class="property-value" colspan="2">



<script type="text/javascript">

//<![CDATA[

var min_avail = 1;

var avail = 0;

var product_avail = 0;

//]]>

</script>



            <strong>{$lng.txt_out_of_stock}</strong>

          </td>



        {elseif not $product.appearance.force_1_amount and $product.forsale ne "B"}



          <td class="property-name product-input">

            {if $config.Appearance.show_in_stock eq "Y" and not $product.appearance.quantity_input_box_enabled and $config.General.unlimited_products ne 'Y'}

              {$lng.lbl_quantity_x|substitute:quantity:$product.avail}

            {else}

              {$lng.lbl_quantity}

            {/if}

          </td>

          <td class="property-value" colspan="2">



<script type="text/javascript">

//<![CDATA[

var min_avail = {$product.appearance.min_quantity|default:1};

var avail = {$product.appearance.max_quantity|default:1};

var product_avail = {$product.avail|default:"0"};

//]]>

</script>

            <input type="text" id="product_avail_input" name="amount" maxlength="11" size="6" onchange="javascript: return check_quantity_input_box(this);" value="{$smarty.get.quantity|default:$product.appearance.min_quantity}"{if not $product.appearance.quantity_input_box_enabled} disabled="disabled" style="display: none;"{/if}/>

            {if $product.appearance.quantity_input_box_enabled and $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products ne 'Y'}

              <span id="product_avail_text" class="quantity-text">{$lng.lbl_product_quantity_from_to|substitute:"min":$product.appearance.min_quantity:"max":$product.avail}</span>

            {/if}



            <select id="product_avail" name="amount"{if $active_modules.Product_Options ne '' and ($product_options ne '' or $product_wholesale ne '')} onchange="javascript: check_wholesale(this.value);"{/if}{if $product.appearance.quantity_input_box_enabled} disabled="disabled" style="display: none;"{/if}>

                <option value="{$product.appearance.min_quantity}"{if $smarty.get.quantity eq $product.appearance.min_quantity} selected="selected"{/if}>{$product.appearance.min_quantity}</option>

              {if not $product.appearance.quantity_input_box_enabled}

                {section name=quantity loop=$product.appearance.loop_quantity start=$product.appearance.min_quantity}

                  {if %quantity.index% ne $product.appearance.min_quantity}

                    <option value="{%quantity.index%}"{if $smarty.get.quantity eq %quantity.index%} selected="selected"{/if}>{%quantity.index%}</option>

                  {/if}

                {/section}

              {/if}

            </select>



          </td>



        {else}



          <td class="property-name product-input">{$lng.lbl_quantity}</td>

          <td class="property-value" colspan="2">



<script type="text/javascript">

//<![CDATA[

var min_avail = 1;

var avail = 1;

var product_avail = 1;

//]]>

</script>



            <span class="product-one-quantity">1</span>

            <input type="hidden" name="amount" value="1" />



            {if $product.distribution ne ""}

              {$lng.txt_product_downloadable}

            {/if}



          </td>



        {/if}



      </tr>



      {if $product.min_amount gt 1}

        <tr>

          <td colspan="3" class="property-value product-min-amount">{$lng.txt_need_min_amount|substitute:"items":$product.min_amount}</td>

        </tr>

      {/if}



    {/if}



  </table>



</td>

  </tr>

</table>