Digitalmash: A mash of work from Australian designer, Robyn Morris

Dynamic Columns

Monday, May 25th, 2009

I get a lot of emails asking how I output the comments in a column format. Here’s how.

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.

The Problem

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.

Making Columns

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

Simple solution

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.

UPDATE 22/08/09
Expression Engine users can use the method below to achieve the same effect in a more elegant way. Thanks to Nick Kutateli's comment for the heads up.

<!-- LOOP BEGIN -->
<li class="{switch="newrow| | | "}">
Comment
</li>
<!-- LOOP END -->

And your CSS would be:

.newrow { clear:both; }

Did this article tickle your fancy? If so, you can subscribe to receive new posts.

Comment

Nobody likes a lurker. Come join in the discussion.

Save

Del.icio.us / Google / Live / Ma.gnolia / Yahoo

Ignorance Avoidance | Flat Shadows

Back to Journal home

36 Comments

Thank you Rob, I’ve been curious myself as to how you had accomplished this.

1 Stephen Reply
May 26th, 2009 at 12:48 AM
That’s a fancy little trick, you’ve got there. I will try to get it to work in ExpressionEngine someday.

You can also try to add a class “clearfix” to the div with the class “column”, instead of creating an extra div with no content in it. But that might cause an extra bunch of php mess inside the html. Oh well, it’s a derty job anyway.

2 Thijs Visser Reply
May 26th, 2009 at 12:53 AM
The simplest solutions are always the best. Thanks for sharing.

3 isaninja Reply
May 27th, 2009 at 05:08 PM
Very cool. I think I’m going to to try this on my next layout (but not for comments… your uniqueness will remain).

4 Ian P. Hines Reply
May 28th, 2009 at 02:20 AM
I love your site! Half the stuff about the software doo-hickeys is above me, but your site is dynamic and funky and very interesing! You rock!

5 Stephanie Reply
May 28th, 2009 at 08:20 AM
Really like the way you do things around here, keep it up :-)

6 Fernanda Reply
May 29th, 2009 at 10:11 PM
Rob et al,

If you’re using Expressionengine a simpler solution would be to add a class of “first” to the first “cell” of each row that is cleared to the left. Then in your EE template just add class=”{switch=“first| | | “}” to the “cell” element and voila. Same results using Expressionengine’s built in functionality with no hacking involved. Hope this helps.

Cheers,
Nick

7 Nick Kutateli Reply
June 2nd, 2009 at 04:38 AM
While it may be simple, I don’t think it’s something I would’ve thought of if I was trying to accomplish this, thanks.

8 Paul Reply
June 16th, 2009 at 07:23 AM
just found a minor bug. If you click “leave a Reply” the arrow whit which you can close the reply form doesn’t get changed.

9 chris Reply
June 23rd, 2009 at 10:32 PM
Hey, like the columns, but it seems you’re wasting a lot of space under each comment. How would you push them up, together like a jigsaw? That would be cool. Anyone know how??

10 Max Reply
July 1st, 2009 at 10:26 PM
So it’s done like that ? Great! I was sure it would be more complicated, but then again what do I know ? I’m just learning the ropes of PHP, and your blog has been a tremendous help. Thank you!

11 Zegarki na reke Reply
July 7th, 2009 at 06:56 PM
This is an awesome tutorial! Comments like that are way easier to read. If you only were able to implement “tree comments” it’d be even better.

12 Noclegi Gory Stolowe Reply
July 20th, 2009 at 08:31 PM
@Stephen: Cool idea. I’m trying a nested comment to see how it looks

13 Corbacho Reply
July 23rd, 2009 at 02:17 AM
Very simple and useful. I saw it on “build internet” but I try it now and it works very well. Thanks.

14 Fred Reply
July 23rd, 2009 at 03:46 AM
I have tried this with content, and I must say, it’s hard to have the columns centered (the last column will have ‘extra’ right padding, i.e. new class every X number of columns). . . Do you think there’s a better way to present the columns so that each row ends up centered? Thanks!

15 Shuk Reply
July 23rd, 2009 at 01:35 PM
@Stephen: Yeah, this is very interesting. Thank you!

16 Anna-Lena Reply
July 23rd, 2009 at 04:13 PM
You did a great job on this! There is one more solution with the same result. Try using unordered list UL instead of #container and list items LI instead of column. On every 6th LI, just add a class, that is declared as clear:both. This class can also contain extra right padding as mentioned by Shuk above and even more things. This solution is more semantic and is using less XHTML code. If someone is interested, I can provide an example.
Cheers!

17 Krasi Reply
July 23rd, 2009 at 04:44 PM
Hello, Rob
The same layout can be achieved using the inline-block property, ofcourse with the appropriate browser hacks.

18 Ionut Popa Reply
July 23rd, 2009 at 05:47 PM
ehehe really nice and short code…

19 haberler Reply
July 24th, 2009 at 06:42 AM
very great, i love your Site very much.
These details are enormes. Thanks for the esplanation with the Comments

but… some little bug i found..

http://img5.imagebanana.com/view/w4zffrrh/bug.jpg

im using macOSX (mac mini - intel) with firefox 3.5.1

20 Michael Reply
July 24th, 2009 at 02:57 PM
@haberler: I must agree with you. Simplicity is everything.

21 Ashraf Ali Reply
July 26th, 2009 at 09:57 PM
I would be hard not to agree with you. Dynamic columns would like much better and clear. They would give the site complete and professional look. I think that it is just one of those things that make a site fine. Taking first look at the site sometimes you can say: wow, that’s one fine piece of graphic. And some are just: man, that’s crap! So I think this is a step in right direction.

22 Mieszkania Gryfino Reply
August 19th, 2009 at 02:10 PM
i like the way the comments are set up in columns here. it soothes my artistic senses. it would be cool if someone could put comments in a linear or loop format, like threads/tree branches, so that we can see how like a uhm family tree, the entire format of all the comments.

23 mertz Reply
August 20th, 2009 at 09:52 AM
@Krasi: I’m interested in the code you mentioned. Please, give us some example. Thanks.

24 Giraldi Maggio Reply
September 4th, 2009 at 01:20 AM
@Giraldi: Here is the example: http://makaveev.com/test/dynamic_cols_eg4.html Just view source to see how it works. It is very similar to the original solution but it uses unordered lists and list items instead of DIV elements.

25 Krasi Reply
September 4th, 2009 at 03:35 PM
@Krasi: That’s good.. but I was wondering how the code/command looks to execute that.

26 Giraldi Maggio Reply
September 4th, 2009 at 06:38 PM
@Giraldi: Well, I’m not familiar with WordPress, so I can’t tell you! I was talking about only XHTML/CSS solution. Don’t know how to implement this in WordPress.

27 Krasi Reply
September 4th, 2009 at 07:45 PM
.commentlist li:nth-child(6n) { clear: left; }

(not compatible with “some” browsers though)

regards

28 rado Reply
September 8th, 2009 at 01:34 AM
Nice Design! Thanks

29 Raj Reply
September 12th, 2009 at 01:50 AM
All your tutorials are great. Please would you do a tutorial on dynamic drop down list, would be awesome (at the current time its driving me crazy)

30 Mike Reply
September 16th, 2009 at 04:44 AM
Fantastic! Been admiring your site for some time now and the comments feature is a really awesome layout. Thanks for the breakdown of code.

31 Dale Napier Reply
October 13th, 2009 at 03:45 PM
@Thijs: Nice.

32 Mike thompson Reply
October 30th, 2009 at 09:36 AM
I was recently on your fantastic website and saw a reference of book you recommended for column design. This may not be pertinent to this discussion, but I cant seem to find it or remember what the book was called. Any help?? Thanks Rob. Probably 40th time Ive come to this site and it still rocks. Damn.

33 Jeremy Taylor Reply
November 5th, 2009 at 04:14 AM
@Jeremy: Any hints? There are a lot of books on grids out there! :)

34 Rob Morris Reply
November 5th, 2009 at 07:24 AM
@Stephen: Just wondering how replying to a specific post affects the comment.

35 Ogden Eisler Reply
November 19th, 2009 at 01:17 AM
Seems great!

36 Cristian O. Balan Reply
December 23rd, 2009 at 02:04 AM

Dynamic Columns

Monday, May 25th, 2009

The Problem

Making Columns

Simple solution

Share

Save

36 Comments

1 StephenReply

2 Thijs VisserReply

3 isaninjaReply

4 Ian P. HinesReply

5 StephanieReply

6 FernandaReply

7 Nick KutateliReply

8 PaulReply

9 chrisReply

10 MaxReply

11 Zegarki na rekeReply

12 Noclegi Gory StoloweReply

13 CorbachoReply

14 FredReply

15 ShukReply

16 Anna-LenaReply

17 KrasiReply

18 Ionut PopaReply

19 haberlerReply

20 MichaelReply

21 Ashraf AliReply

22 Mieszkania GryfinoReply

23 mertzReply

24 Giraldi MaggioReply

25 KrasiReply

26 Giraldi MaggioReply

27 KrasiReply

28 radoReply

29 RajReply

30 MikeReply

31 Dale NapierReply

32 Mike thompsonReply

33 Jeremy TaylorReply

34 Rob MorrisReply

35 Ogden EislerReply

36 Cristian O. BalanReply

So what do you think?

Recent Entries

1 Stephen Reply

2 Thijs Visser Reply

3 isaninja Reply

4 Ian P. Hines Reply

5 Stephanie Reply

6 Fernanda Reply

7 Nick Kutateli Reply

8 Paul Reply

9 chris Reply

10 Max Reply

11 Zegarki na reke Reply

12 Noclegi Gory Stolowe Reply

13 Corbacho Reply

14 Fred Reply

15 Shuk Reply

16 Anna-Lena Reply

17 Krasi Reply

18 Ionut Popa Reply

19 haberler Reply

20 Michael Reply

21 Ashraf Ali Reply

22 Mieszkania Gryfino Reply

23 mertz Reply

24 Giraldi Maggio Reply

25 Krasi Reply

26 Giraldi Maggio Reply

27 Krasi Reply

28 rado Reply

29 Raj Reply

30 Mike Reply

31 Dale Napier Reply

32 Mike thompson Reply

33 Jeremy Taylor Reply

34 Rob Morris Reply

35 Ogden Eisler Reply

36 Cristian O. Balan Reply