Question

I am modifying a wordpress theme completely, and have run into one very simple problem. Please look at my page here: wordpress blog When you scroll down, you can see the one blank area under the first post. For some reason, that block isn’t floating left. Each post has the following css that fits in a 645px container:

.home-post-wrap { width: 285px; margin:0; float: left; background-color: #FFF;  padding: 15px; overflow: hidden; border-bottom:1px dotted #C5C5C5; border-right:1px dotted #C5C5C5; }

Any idea on how to make the page flow correctly here?

Answer 1

crimson_penguin is correct. It’s because the columns are different heights. Every 2 columns you wan’t to do a clear. The easiest thing to do here would look at the index of the loop and echo a clearfix after every 2. You can do this with modulo, and/or apply a class to the ones at 1, 3, 5, etc... to clear:left.

Here is a PHP function of mine that I use to clear.

<?php
    public static function cycle($count, $odd = 'odd', $even = 'even') {
        return ($count % 2) ? $even : $odd;
    }
?>

Basically, you pass it three arguments (the second and third are optional) where the first is the $count, or the object to look at (for example $i in a for loop) and $odd / $even are strings to be used when an odd or even item in the loop is encountered.

Here it is in action:

    <?php foreach ($products as $key => $product): ?>
        <li class="<?= Template::cycle($key) ?>">
            <img src="<?= $product->get_photo('small') ?>" />
            <div class="productMeta">
                <h3><a href="<?= $product->get_absolute_url() ?>"><?= $product->get_full_name() ?></a></h3>
                <p><?= $product->get_description() ?></p>
            </div>
        </li>
    <?php endforeach; ?>

I’m doing the cycle on the $key which in this case happens to be 0, 1,... n. The result is the following:

<li class="odd"> 
    <img src="http://arbesko.dev/wp-content/themes/arbesko/img/products/small/465.jpg" />
    ...
</li> 

<li class="even"> 
    <img src="http://arbesko.dev/wp-content/themes/arbesko/img/products/small/935.jpg" /> 
    ...
</li> 

<li class="odd"> 
    <img src="http://arbesko.dev/wp-content/themes/arbesko/img/products/small/350.jpg" />
    ...
</li>

Simply apply some clear:left to the odd ones, and you’ll be all set!