I'm modifying a wordpress theme completely, and also have encounter one quite simple problem. Please take a look at my page here: wordpress blog Whenever you scroll lower, you can observe the main one blank area underneath the first publish. For whatever reason, that block is not floating left. Each publish has got the following css that matches inside 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 regarding how to result in the page flow properly here?

It's floating left, however , the very first block is taller compared to second, which makes it stand out below, so the third block continues to be on a single "line" because the first couple of, like you realized it to when the first block was two times as high.

That which you most likely want, is really a <div style="obvious: left"></div> between every 2 blocks... but that could be difficult to do in WordPress. Another potential solution could be min-height in it, but that would not be as nice (and wouldn't operate in IE6).

crimson_penguin is correct. It is because the posts will vary levels. Every 2 posts you wan't to perform a obvious. The simplest factor to complete here would consider the index from the loop and echo a clearfix after every 2. This can be done with modulo, and/or use a class towards the ones at 1, 3, 5, etc... to clear:left.

This is a PHP purpose of mine which i use to obvious.

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

Essentially, you pass it three arguments (the 2nd and third are optional) where the very first is the $count, or even the object to check out (for instance $i inside a for loop) and $odd / $even are strings for use when a strange as well as item informed is experienced.

Here you go for 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 am doing the cycle around the $key which within this situation is actually 0, 1,... n. It makes sense the next:

<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>

Apply some clear:left towards the odd ones, and you will be ready!