Configurable Option going berserk on Product Page in Magento

Question

I am a novice in Magento and kinda stuck badly here.

My Theme is ready in Magento and I needed a Size selection on my Product Page. So I searched and found out that it is done by having Configurable Product. I did all the steps mentioned here http://www.magentocommerce.com/knowledge-base/entry/creating-a-configurable-product

Few minutes later, I did create a Size dropdown which made me felt that I am not a useless hobo after all; but then reality hit me. The dropdown somehow is showing itself at a very odd position and I don't know how to fix it.

This picture shows it all:-

You can see that it's gone below the image whereas I want it right next to the image. The fact that I am not even able to fix the CSS or front end makes me feel more bad.

Hence my question is, how can I bring it back to senses or do some code fixes so that it is shown at the right place.

Many Many Thanks

Answer 1

Magento has a strange way of rendering configurable options on a product page. Basically, when you create a configurable product, you have the option of selecting whether the options fall in container1 or container2 (great naming, eh?) You can adjust this in the product edit screen under Design > Display Product Options In.

However, a much easier solution is to move container2 above container1 in your catalog/product/view.phtml file as all configurable products default to Block After Info Column.

This is the code you're looking to move if you're using CE:

<?php if ($_product->isSaleable() && $this->hasOptions()):?>
    <?php echo $this->getChildChildHtml('container2', '', true, true) ?>
<?php endif;?>