display configurable products attributes below short description - css

Question

please visit this link:
configurable product
here you can see color and charactar attributes options.
I want to display this in one line below short description
"color ": "choose an option" and "charactar" : "choose an option" should display in one line below
short description :
this is view.phtml :
<?php
?>
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $pageLayout = str_replace(array('page/','.phtml'),'',Mage::app()->getLayout()->getBlock('root')->getTemplate()); ?>
<?php $_product = $this->getProduct(); ?>
<?php $setting = Mage::helper('em0113settings'); ?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div class="Individual">
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->getGroupedHtml() ?></div>
<div class="product-view">
<div class="product-essential">
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
<div class="product-img-box" style="width:<?php echo $setting->getImageProduct_BaseImageWidth(390) ?>px;">
<?php echo $this->getChildHtml('media') ?>
</div>
<?php
$related_product_collection = $_product->getRelatedProductCollection();
$related_product_collection->AddStoreFilter();
$count = count($related_product_collection);
?>
<div class="product-shop <?php if($count > 0 && $pageLayout=='1column'): ?>has-related<?php else: ?>no-related<?php endif ?>">
<div class="product-shop-wrapper <?php if($_product->isGrouped()): ?>grouped<?php endif ?>">
<?php list($_prev_prod, $_next_prod) = Mage::helper('em0113settings/product')->getPreviousNextProducts($this->getProduct()); ?>
<!--<?php if($_prev_prod != NULL): ?>
<?php echo $this->__('Previous') ?>
<?php endif; ?>
<?php if($_next_prod != NULL): ?>
<?php echo $this->__('Next') ?>
<?php endif; ?>-->
<div class="product-name">
<h2><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h2>
</div>
<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>
<!--<?php if ($this->canEmailToFriend()): ?>
<p class="email-friend"><?php echo $this->__('Email to a Friend') ?></p>
<?php endif; ?>-->
<div class="desc-options">
<div class="Pro_des">
<?php if ($_product->getShortDescription()):?>
<div class="short-description">
<hr>
<br/>
<div class="std"><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?>
</div>
</div>
<?php endif;?>
</div>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>
</div>
<!--
<?php if ($this->displayProductStockStatus()): ?>
<?php if($_product->isSaleable()): ?>
<p class="availability in-of-stock"><span><?php echo $this->__('In of stock') ?></span></p>
<?php else : ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<?php endif; ?>
-->
<hr class="hr">
<div class="check_delivery">
<?php echo $this->getLayout()->createBlock('core/template')->setTemplate('checkdelivery/checkdelivery.phtml')->toHtml();?>
</div>
<div class="Quick">
<div class="Quick_1">
<div class="product-data">
<?php echo $this->getChildHtml('alert_urls') ?>
<?php echo $this->getChildHtml('product_type_data') ?>
<?php echo $this->getChildHtml('extrahint') ?>
<?php //echo $this->getTierPriceHtml() ?>
<?php if($_product->getTypeId() == 'configurable'): ?>
<?php echo $this->getChildHtml('product_options_wrapper_bottom') ?>
<?php endif; ?>
</div>
<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php else:?>
<?php echo $this->getChildHtml('addto') ?>
<?php endif; ?>
<!-- <?php if ($_product->isAvailable()) {?>
<div><?php //$buttonTitle = $this->__('Add to Cart'); ?>
<button type="button" title="<?php //echo $buttonTitle ?>" id="product-addtocart-button" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php //echo $buttonTitle ?></span></span></button>
</div>
<br/>
<div ><button class="button buy-now" onclick="location.href ='{{config path="web/unsecure/base_url"}}/checkout/cart/add?product=1&qty=1'">
<span><span>Buy Now</span></span></button>
</div>
<?php }?>-->
</div>
<?php echo $this->getChildHtml('extra_buttons') ?>
<?php elseif (!$_product->isSaleable()): ?>
<div class="add-to-box">
<?php echo $this->getChildHtml('addto') ?>
</div>
<?php endif; ?>
</div>
<div class="Quick_2">
<!-- Soled By -->
<div class="soled_by">
<?php
$helper=Mage::helper('marketplace');
$_product=Mage::registry('current_product');
$productowner=Mage::getModel('marketplace/product')->isCustomerProduct($_product['entity_id']);
if($productowner['userid']!=""){
$captchenable = $percent = Mage::getStoreConfig('marketplace/marketplace_options/captcha');
$rowsocial=Mage::getModel('marketplace/userprofile')->getPartnerProfileById($productowner['userid']);
}
?>
<script type="text/javascript">
if (typeof jQuery == 'undefined'){
document.write(unescape("%3Cscript src='//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<div class="soled-by-dealer">
<!--<div class="block-title"><strong><span>
<?php if($rowsocial['shoptitle']!='')
echo $rowsocial['shoptitle'];
else
echo $rowsocial['profileurl']; ?>
</span></strong>
</div>-->
<h5> SOLD BY : </h5>
<span>
<?php if($rowsocial['profileurl'] == "kidsdial2")
{?>
<a href="<?php echo Mage::getUrl('marketplace/seller/collection').$rowsocial['profileurl'] ?>" title="<?php echo "Totaltoys"; ?>" id="siteconnect">
<?php echo "Totaltoys"; ?></a><?php
}
else{?>
<a href="<?php echo Mage::getUrl('marketplace/seller/collection').$rowsocial['profileurl'] ?>" title="<?php echo $rowsocial['profileurl']; ?>" id="siteconnect">
<?php echo $rowsocial['profileurl']; ?></a><?php
}
?>
</span>
</div>
<br/>
<div class="delivery_details">
<div class="COD">
<?php $attribute = $_product->getResource()->getAttribute('cod_available');
$attribute_value = $attribute ->getFrontend()->getValue($_product);
if ($attribute_value == "Yes"){ ?>
<h5> CASH ON DELIVERY </h5>
<div class="Delivery_hover_details">?<p class="killing"><?php echo "Available";?></p></div>
<?php }else{ ?>
<i class="fa fa-times"></i>
<p>
<h5 style="position:relative;bottom: 11px;">CASH ON DELIVERY </h5>
<p class="reduce"><?php echo " Not Available"; ?></p>
</p>
<?php } ?>
<span class="coupontooltip">
<div class="cod_content">
<h5>How do I place a Cash on Delivery (COD) order?</h5>
<p>All items that have the "Cash on Delivery Available" icon are valid for order by Cash on Delivery.</p>
<p>Add the item(s) to your cart and proceed to checkout.When prompted to choose a payment option, select "Cash on Delivery". </p>
<p>Once you place the order you will receive confirmation call from our customer support for validation with in 48 hours. Once verified and confirmed, your order will be processed for shipment in the time specified, from the date of confirmation. You will be required to make a cash-only payment to our courier partner at the time of delivery of your order to complete the payment.</p>
<p>Terms & Conditions</p>
<p>The maximum order value for COD is ₹5000.</p>
<p>e-Gift Vouchers or Store Credit cannot be used for COD orders.</p>
<p>Cash-only payment at the time of delivery.</p>
</div>
</span>
</div>
<div class= "bottom3">
<!-- wholesale available -->
<?php
//$product is your current product
if($_product->getTierPrice()) {
echo "
<div class = 'quickphp'>
<h5>Wholesale</h5>
Available.<br>
Usually Delivered in 10-15 business days.
</div>
";
}
else{
echo "
<div class = 'quickphp'>
<h5>Wholesale</h5>
Not Available.<br>
</div>
";
}
?>
<div class="avail">
<?php if ($this->displayProductStockStatus()): ?>
<?php if($_product->isSaleable()): ?>
<p class="availability in-of-stock"> <h5>Availability</h5> <?php echo $this->__('In Stock') ?></span></p>
<?php else : ?>
<p class="availability out-of-stock"> <h5>Availability</h5> <?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<?php endif; ?>
</div>
<div class="replace">
<span> <b>7 days</b> Replacement Guarantee</span>
<div class="Delivery_hover_details">?
<span class="coupontooltip">
<h5> How do I return an item purchased on Totaltoys.com</h5>
<p>Conveniently, you can call us at 092-434-22233 and email us at contact#totaltoys.com with order number, invoice number and product name. If you've received an item in a 'Damaged', 'Defective' or 'Not as Described' state.</p>
<h5>Return & Replacement policy:</h5>
<p>Returns or replacement request should be placed within 7 days from the date of delivery.</p>
<p>As we receive your request, our concerned team will contact you to validate the compliant. The validation process may require submitting of product photos. Once the validation process is completed then further action will be taken.
Once the product reaches to us/seller, the replacement will be proceed in 1-2 working days after physical inspection of the goods and shipment will be done simultaneously.</p>
<p>If you've received an item in a 'Damaged', 'Defective' or 'Not as Described' state, all replacements/pickups will be done free of cost.</p>
<p>If the packaging is tampered with or damaged, before accepting delivery of the goods, please refuse to take delivery of the package, and call us on 092-434-22233 or mail us at contact#totaltoys.com , mentioning your order reference number. We shall make our best efforts to ensure that a replacement delivery is made to you at the earliest.</p>
<p>In the rare circumstances where a pickup cannot be done, you can ship the product through any courier. You will be reimbursed the shipping charges against the original receipt.</p>
<p>Replacement is subjected to availability of stock. In case a replacement is not available, the amount will be refunded to your account from which the purchase was made. (Amount includes shipping and gift wrapping charges)</p>
<h5> Return Request is not Accepted If:</h5>
<li>Return request is made outside the specified time period</li>
<li>Missing of tags, labels, original packing, and invoice.</li>
<li>Misused or Mishandle of the product from customer end.</li>
<p>For all refunds we will refund the amount to same mode of payment as used during checkout. Refunds for cash on delivery will be made via online transfer of funds to the customers bank account.</p>
<p>If the customer chooses to cancel the order before the product is shipped, he will be entitled to a 100% refund.
Do I have to return the free gift when I return a product?</p>
<p>Yes. The free gift is included as part of the item order and needs to be returned along with the originally delivered product</p>
<p>Please contact us on contact#totaltoys.com or call us at 092-434-22233 for any doubts and concerns</p>
</span>
</div>
</div>
</div>
</div>
<div class="Delivery">
<h5> Delivered By </h5>
<div class="Delivery_hover_details">?
<span class="coupontooltip">
<div class="delivery_content">
<h5>What is the estimated delivery time?</h5>
<p>Sellers generally procure and ship the items within the time specified on the product page. Business days exclude public holidays and Sundays.</p>
<p>Estimated delivery time depends on the following factors:
<li>Time of the order, usually orders made after 2:00pm can be shipped only on next workingday</li>
<li>The Seller offering the product</li>
<li>Product's availability with the Seller</li>
<li>The destination to which you want the order shipped to and the Seller's location</li></p>
</div>
</span>
</div>
<ul class="fk-ul-disc">
<li>Usually Delivered in 3-5 business days.</li>
<li> Delivery Time may exceed than usual due to Festival Holidays</li>
</ul>
</div>
</div>
</div>
<!--<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php else:?>
<?php echo $this->getChildHtml('addto') ?>
<?php endif; ?>
</div>
<?php echo $this->getChildHtml('extra_buttons') ?>
<?php elseif (!$_product->isSaleable()): ?>
<div class="add-to-box">
<?php echo $this->getChildHtml('addto') ?>
</div>
<?php endif; ?>-->
<?php echo $this->getChildHtml('other');?>
<?php echo $this->getChildHtml('short_des_after'); ?>
<?php if ($_product->isSaleable() && $this->hasOptions()):?>
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
<?php endif;?>
<?php echo $this->getChildHtml('shippingreturns') ?>
</div>
</div>
<!--<span class="or_buy_now"> -- OR --</span>-->
<!--<button type="button" title="<?php echo $buttonTitle ?>" id="product-addtocart-button" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>-->
<!-- Buy Now -->
<div class="clearer"></div>
</form>
</div>
<!-- Add button share facebook -->
<?php if ($setting->getImageProduct_ViewSocial()): ?>
<div id="social-share" class="hide-lte0 hide-lte1 hide-lte2"></div>
<script type="text/javascript">
jQuery(document).ready(function($){
jQuery('#social-share').dcSocialShare({
buttons: 'facebook,plusone,twitter,pinterest',
twitterId: 'designchemical',
email: 'moc//niamod/liame',
align: 'right',
floater: false
});
});
</script>
<?php endif; ?>
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
this.form.submit();
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
// Remove custom datetime validators
for (var methodName in Validation.methods) {
if (methodName.match(/^validate-datetime-.*/i)) {
delete Validation.methods[methodName];
}
}
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
</div>
<div class="product-collateral">
<?php foreach ($this->getChildGroup('detailed_info', 'getChildHtml') as $alias => $html):?>
<div class="box-collateral <?php echo "box-{$alias}"?>">
<?php if ($title = $this->getChildData($alias, 'title')):?>
<h2><?php echo $this->escapeHtml($title); ?></h2>
<?php endif;?>
<?php echo $html; ?>
</div>
<?php endforeach;?>
<?php echo $this->getChildHtml('product_additional_data') ?>
<?php echo $this->getChildHtml('product_additional_collateral') ?>
</div>
<?php echo $this->getChildHtml('catalog.product.related'); ?>
<?php echo $this->getChildHtml('review_list') ?>
<?php echo $this->getChildHtml('upsell_products') ?>
<?php if (Mage::helper('em0113settings')->getImageProduct_UseTabs()): ?>
<script type="text/javascript">
//<![CDATA[
jQuery(window).ready(function() {
setTimeout(function() {
timeout = null;
EM.tools.decorateProductCollateralTabs();
}, 200);
});
//]]>
</script>
<?php endif ?>
</div>
<!-- mobile -->
<div class="set">
<?php $attributeSetModel = Mage::getModel("eav/entity_attribute_set");
$product=Mage::getModel('catalog/product')->load($_product->getId());
$attributeSetModel->load($product->getAttributeSetId());
$attributeSetName = $attributeSetModel->getAttributeSetName();
if($attributeSetName=='Mobile'){ echo $this->__('color may vary as shown in above image'); } ?>
</div>
<!-- mobile end-->
<style>
.reduce {
clear: both;
float: left;
bottom: 13px;
border-radius: 2px;
color: #666;
display: inline-block;
font-size: 11px;
height: 0px;
line-height: 6px;
position: relative;
text-align: center;
text-decoration: none;
}
.set {
position:relative;
bottom:950px;
}
.product-view .short-description { width: 50%; float:left; }
dl dt {
font-weight: bold;
display: block;
margin: 0 0 .5em;
}
.product-options dd {
margin: 4px 0;
display: inline-block;
}
</style>

Answer 1

This can easily be done with following css snippet:
#product-options-wrapper {
clear: both;
width: 100%;
}
#product-options-wrapper dl dt, #product-options-wrapper dl dd {
display: inline-block;
vertical-align: middle;
}