Trying to get 3x3 product grid on Magento homepage but it doesn't work properly

Question

I've been trying to make a featured homepage product grid that displays 9 products in total but instead of showing 3 rows of 3 products I am getting 3/1/3/2 and I don't understand why.

Here is the development domain I am doing this with, on the home you will see the grid. There are supposed to be 9 products and then you click the arrow to view more.

http://bit.ly/1mAxK2a

Here is the featured.phtml file from /app/design/frontend/mytheme/template/catalog/product/featured.phtml

<?php
/**
 * Product list template
 *
 * @see Mage_Catalog_Block_Product_List
 */
?>
<?php
    $_productCollection=$this->getLoadedProductCollection();
    $_helper = $this->helper('catalog/output');
    $page = Mage::app()->getLayout()->getBlock('root')->getTemplate();
    $newsaleicon = Mage::helper("ExtraConfig")->themeOptions('newsaleicon');
    $ajaxcart = Mage::helper("ExtraConfig")->themeOptions('ajaxcart');
?>

<div class="featured-product">
    <div class="new-arrow">
    <h2 class="page-title subtitle"><?php echo $this->__('Featured Products') ?></h2>
    </div>



    <?php if($_productCollection->count()): ?>
    <?php $_collectionSize = $_productCollection->count() ?>
    <div class="slider2">
    <?php if($page == 'page/1column.phtml') { ?>
        <?php $columnCount = 8; $this->setColumnCount($columnCount); $_columnCount = $this->getColumnCount(); ?>
    <?php } else { ?>
    <?php $columnCount = 9; $this->setColumnCount($columnCount); $_columnCount = $this->getColumnCount(); ?>
    <?php } ?>
    <?php $i=0;$j=0; foreach ($_productCollection as $_product): ?>

        <?php if ($i++%$_columnCount==0): ?>
        <?php if($page == 'page/1column.phtml') { ?>
        <ul class="products-grid products-grid-full">
        <?php } elseif($page == 'page/2columns-right.phtml' || $page == 'page/2columns-left.phtml') { ?>
        <ul class="products-grid products-grid-side">
        <?php } else { ?>
        <ul class="products-grid products-grid-middle">
        <?php } ?>
        <?php endif; ?>
            <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
        <div class="content_top">

            <?php if($newsaleicon == '1') { ?> 
            <?php $adate = date('Y-m-d');  //echo 'frpm:-'.$_product->special_from_date.'----';echo "to:-".$_product->special_to_date.'--';
                $a= 0;
                if($_product->special_from_date != null && $_product->special_to_date == "")
                {
                    if( $adate >= $_product->special_from_date)
                    {
                        $a = 1; 
                    }
                }
                if($_product->special_from_date != "" && $_product->special_to_date != "")
                {
                    if($adate >= $_product->special_from_date && $adate <= $_product->special_to_date)
                    {
                    $a = 1; 
                    }
                }

                    if($a == 1){ ?>
                   <div class="sale"><label><?php echo $this->__('SALE') ?></label></div>
                    <?php } ?>


                  <?php $bdate = date('Y-m-d');
                $b= 0;
                if($_product->news_from_date != null && $_product->news_to_date == "")
                {
                    if( $bdate >= $_product->news_from_date)
                    {
                        $b = 1; 
                    }
                }
                if($_product->news_from_date != "" && $_product->news_to_date != "")
                {
                    if($bdate >= $_product->news_from_date && $bdate <= $_product->news_to_date)
                    {
                    $b = 1; 
                    }
                }
                    if($b == 1){ ?>
                   <div class="new"><label><?php echo $this->__('NEW') ?></label></div>
                    <?php } 
                ?>  
            <?php } ?>

            <?php if($ajaxcart == '2') { ?>
            <a href='<?php echo $this->getUrl('ajax/index/options',array('product_id'=>$_product->getId()));?>' class='fancybox quick-view' id='fancybox<?php echo $_product->getId()?>'><div class="tooltip"><?php echo $this->__('Quick View') ?><div class="errow"></div></div></a>
            <?php } ?>

            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
            <img class="small-image" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(430) ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
            <img class="thumbnail" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(430) ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
            </a>
            <div class="productname">
            <?php if($page == 'page/3columns.phtml') { ?>     
                <?php   $productName = $this->htmlEscape($_product->getName());
                if(strlen($productName) > 18) {
                    $productName = mb_strimwidth($productName,0,18,"...",'utf-8');
                } ?>
            <?php } else { ?>
                <?php   $productName = $this->htmlEscape($_product->getName());
                if(strlen($productName) > 30) {
                    $productName = mb_strimwidth($productName,0,30,"...",'utf-8');
                } ?>
            <?php } ?>
            <h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $productName; ?></a></h2>
            </div>
        </div>

        <div class="productgrid-area">

            <div class="vert">
            <?php echo $this->getPriceHtml($_product, true) ?>
            </div>    

            <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>

            <div class="actions">
            <?php if($_product->isSaleable()): ?>
                <?php if($ajaxcart == '1' || $ajaxcart == '2') { ?>
                <?php if ( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped()) ) { ?>
                    <div class="ajax-button">
                    <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart ajx-cart" onclick="setLocationAjax1('<?php echo $this->getAddToCartUrl($_product) ?>','<?php echo $_product->getId()?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                    <div id='ajax_loader1<?php echo $_product->getId()?>' class="ajaxcartpro_progress" style="display: none;">
                        <img src="<?php echo $this->getSkinUrl('ajaxcart/images/al.gif'); ?>">
                    </div>
                    </div>
                <?php } else { ?>
                    <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                <?php }  ?>
                <?php } else { ?>
                <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                <?php } ?>
            <?php else: ?>
                <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
            <?php endif; ?>
            <ul class="add-to-links">
                <?php if ($this->helper('wishlist')->isAllow()) : ?>
                <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" title="<?php echo $this->__('Add to Wishlist') ?>" class="link-wishlist"><div class="tooltip"><?php echo $this->__('Add to Wishlist') ?><div class="errow"></div></div></a></li>
                <?php endif; ?>
                <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" title="<?php echo $this->__('Add to Compare') ?>" class="link-compare"><div class="tooltip"><?php echo $this->__('Add to Compare') ?><div class="errow"></div></div></a></li>
                <?php endif; ?>

            </ul>
            </div>
        </div>

            </li>
        <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
        </ul>
        <?php endif; ?>

    <?php endforeach ?>
    </div>
        <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
    <?php endif; ?>

</div>

I believe this is the line that affects the result but even if I try different multiples of 3 it always seems to be wrong:

<?php $columnCount = 9; $this->setColumnCount($columnCount); $_columnCount = $this->getColumnCount(); ?>

And here is a snippet of CSS that I believe is related:

.featured-product .products-grid-side li.item:first-child + li + li,
.featured-product .products-grid-side li.item:first-child + li + li + li + li + li,

I'm not sure what the issue but if you know I'd really appreciate the help, thanks in advance :)

Also, this is Magento 1.8.1

Answer 1

Oh, your float lefts are snagging on the lis above. I suggest some

.products-grid-side li.item {
    height: 400px;
}

to make them behave as you want.

I like your homepage layout.