This is a rather open question. I started running a blog at blog.gringoflash.com. I will explain my question with two screenshots:
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.
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 finally found this: http://desandro.com/resources/jquery-masonry/. It is exactly what I needed.
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:
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.