simple float issue on wordpress blog

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

It is floating to the left, the problem is that the first block is taller than the second, making it stick out below, and so the third block is still on the same "line" as the first two, like you would expect it to if the first block was twice as high.

What you probably want, is a <div style="clear: left;"></div> between every 2 blocks... but that might be hard to do in WordPress. Another potential solution would be min-height on them, but that wouldn't be quite as nice (and wouldn't work in IE6).

Answer 2

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!