How to show related product in horizontal layout or way in Magento?

In this Tutorial, I am going to show Related products Vertically to Horizontal layout. This condition faced when I was working on a magento store and client need to activate relate product layout that will help her for up-selling or cross selling products.

Then after some time she ask me to show related product in Horizontal way and not in the lower right corner only.
So I struggled a lot for searching this then finally got the solutions for.

This is a default option in magento every related product will be shown in <ol> and <li> tag. That's way products shown into vertically layout.

so here is the solution for showing product by changing into the related product section.

Just open this XML file and do some little changes like: -

/public_html/magento/app/design/frontend/your_theme_here/layout/catalog.xml

<-!----Related Products---->
<-block type="catalog/product_list_related" name="catalog.product.related" as="related_products" after="-" template="catalog/product/list/related.phtml" /->

After opening this file you will have to change some lines like:


        before="-" template ="catalog/product/list/related.phtml"

to


        after="-" template="catalog/product/list/related.phtml"

Now Here you have to notice that i have changed only before tag to after tag. so that section will display below product block.

after changing this section, you need to go into  /public_html/magento/app/design/frontend/your_theme_here/template/catalog/product/list/related.phtml for changing the layout vertically to horizontal.

just you need to change here some html tag.

Convert () into the < and > sign.

     (ol) to (table col="4")(tr) and (li) to (td) 
    and then i replaced the (/ol) to (/tr)(/table) and (/li) to (/td) 

before that I tried to change into the css file but it didn't work good. but after changing product shown into the table you just do some changing into the css file for good looking design otherwise is it already set in good way.

I wasted around 4 hours for showing this into horizontal layout.
after a long journey of this store making client was happy with this solution. after that client told me to increase the size of product thumbnail in related product.

Then I edited into the same file and within the code.

Please remove -- from the tags then use.

   <-a class ="product-image" href="<-?php echo $_item-> getProductUrl() ?->" title="<--?php echo $this->htmlEscape($_item->getName())?-->"><--img src="<--?php echo $this->helper('catalog/image')->init($_item,'thumbnail')->resize(50) ?-->" width="100" height="100" alt="<--?echo $this-> htmlEscape($_item->getName()) ?-->" /><-/a>

if you still face any problem then feel free to contact me through below mentioned contact form or mail me - webcodingcage@gmail.com