Now the title is probably a little misleading. We’re not really creating dynamic columns in the sense of something like this. I guess a more accurate title may be something like ‘dynamic float clears’, but that just didn’t have the same ring to it.
For those not sure what the issue is, let me explain. When you output information in floated columns (like my comments, for example), it’s hard to clear each row when the content is dynamic and you don’t know how many items you’re going to have.
We need a way of making every fourth (of third, or sixth or whatever) item drop to a new row.
Now the css involved with making things float as columns is really pretty simple. Just specify a width, and float and you’re good to go.
For example, here’s a really simple 6-column layout. Now if you know you’re only going to have 6 items, then there’s really no problem. But if that number is dynamic (like the number of comments on a blog post), when we add some more items, each with varying amounts of text, things start to fall apart as you can see in our second example (I’ve included red outlines so you can see what’s going on).
Well I’ve built it up to be something amazing, but it’s really a very basic solution using PHP. So if our example was an output from WordPress, we declare the variable before the ‘loop’.
<?php $postcounter = 0; ?>
And inside the loop (at the end) as the items are outputted, we add the following (disregard the comments):
<!-- LOOP BEGIN -->
<div class="column">Dynamic content</div>
<?php
$postcounter++;
if ($postcounter % 6 == 0) {;
echo '<div class="clearfix"></div>';
};
?>
<!-- LOOP END -->
Basically the postcounter variable is keeping count of how many items are being outputted (like the ‘count’ variable does in Expression Engine). Then it’s outputting a clearing div if the item is divisible by 6 (because we’re using six columns in this eg). So on the 6th, 12th, 18th etc… items it will drop in a clearing div to start a new row.
Now our third and final example shows how things should have been. The rows will work regardless of the number and length of our dynamic items. There may be slicker ways of pulling this off, but this is how I’m achieving it on this site.
Expression Engine users can use the method below to achieve the same effect in a more elegant way. Thanks to Nick Kutateli for the heads up.
<!-- LOOP BEGIN -->
<li class="{switch="newrow| | | "}">
Comment
</li>
<!-- LOOP END -->
And your CSS would be:
.newrow { clear:both; }
—Published 24 May, 2009 ← Journal Home