This is a rather open question. I started running a blog at blog.gringoflash.com. 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 hort.org.uk. 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,

Sander

  • 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 almost 7 years ago
  • I agree with Joseph. You do not need JavaScript for this. All you need is CSS. Abinadi Ayerdis almost 7 years ago

3 answers

0
points
This was chosen as the best answer

I finally found this: http://desandro.com/resources/jquery-masonry/. It is exactly what I needed.

Answered over 6 years ago by Sander VDV
o.k.w 2355
1
point

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 hort.org.uk 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:

Narrow:
Narrow

Wide:
Wide

You might want to give it some thoughts. If you really want to, the script file you can use is located at http://www.hort.org.uk/js/project/layout.js (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.:

NUM_COLS : 5,
MIN_COLS : 3,
COL_WIDTH : 255,
GUTTER_WIDTH : 15,
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 almost 7 years ago by o.k.w
1
point

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

Answered almost 7 years ago by Nick Pettit