This is a rather open question. I started running a blog at I will explain my question with two screenshots:

alt text alt text

What I am doing now is using float:left on every .hentry element, and that is about as advanced as it gets. Because every blog post has a different length this method gives strange results sometimes. As you can see in the second screenshot, I would like every single post to vertically align to the post above it, if there is one.

A website incorporating something similar is I discovered they are achieving this with javascript. But I haven't the slightest idea on how to implement something similar.

I don't know if I am asking this question in the right place, but any pointers would be very welcome.

Have a good day,


  • I'm not sure you are considering how much can be done with just CSS, imagine if you had 3 "columns" floating left, each of the elements inside the columns would align to the top... no JS needed. Joseph Silvashy over 8 years ago
  • I agree with Joseph. You do not need JavaScript for this. All you need is CSS. Abinadi Ayerdis over 8 years ago

3 answers

This was chosen as the best answer

I finally found this: It is exactly what I needed.

Answered almost 8 years ago by Sander VDV
o.k.w 2355

Sander, I'm not tryin to burst your bubble, though it is possible to layout the content in the manner you want it, It's not going to be pretty/easy to read/view.

See, you intented layout is having the elements displayed from left to right, top to down but not leaving gaps like what "float: left" did.

The sample site is using javascrpt to rearrange the individual content blurb into something similar to yours but without gaps.

In case you didn't notice, when the screen/window is wide, the layout can be quite messed out. See screenshots below:



You might want to give it some thoughts. If you really want to, the script file you can use is located at (you might want to get permission to use the scripts) You will need to configure some parameters in the file (first few lines) to suit your layout, e.g.:

COL_WIDTH : 255,
WIDTHS: [0,255,525,795],

Call the layout function like this:

new Layout($('content')); 
//'content' is the id of the main wrapper for your case 

I've not tested it myself, just figuring out from the source code on that reference site.

Good luck!

Answered over 8 years ago by o.k.w

I would recommend using a CSS grid framework. Here are my two favorites:

Answered over 8 years ago by Nick Pettit